From c07470be7bf8f80e1ca34df9c9d538e7bc84dedc Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 15 Jan 2019 18:45:56 +0100
Subject: [PATCH] show a spinner while searching

---
 res/css/structures/_RoomView.scss     | 33 ++++++++++++++++++++++-----
 src/components/structures/RoomView.js | 30 ++++++++++++------------
 2 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 72dca953f9..900300b03d 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -95,12 +95,10 @@ limitations under the License.
     flex-direction: column;
 }
 
-.mx_RoomView_body .mx_RoomView_messagePanel {
-    order: 2;
-}
-
-.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
-    order: 2;
+.mx_RoomView_body {
+    .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner{
+        order: 2;
+    }
 }
 
 .mx_RoomView_body .mx_RoomView_statusArea {
@@ -116,6 +114,29 @@ limitations under the License.
     overflow-y: auto;
 }
 
+.mx_RoomView_messagePanelSearchSpinner {
+    flex: 1;
+    background-image: url('../../img/typing-indicator-2x.gif');
+    background-position: center 367px;
+    background-size: 25px;
+    background-repeat: no-repeat;
+    position: relative;
+}
+
+.mx_RoomView_messagePanelSearchSpinner:before {
+    background-color: $greyed-fg-color;
+    mask: url('../../../img/feather-icons/search-input.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 50px;
+    content: '';
+    position: absolute;
+    top: 286px;
+    left: 0;
+    right: 0;
+    height: 50px;
+}
+
 .mx_RoomView_messageListWrapper {
     min-height: 100%;
 
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 368aeb4f19..2511e80e05 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1135,11 +1135,6 @@ module.exports = React.createClass({
         // XXX: todo: merge overlapping results somehow?
         // XXX: why doesn't searching on name work?
 
-        if (this.state.searchResults.results === undefined) {
-            // awaiting results
-            return [];
-        }
-
         const ret = [];
 
         if (this.state.searchInProgress) {
@@ -1820,16 +1815,21 @@ module.exports = React.createClass({
         let hideMessagePanel = false;
 
         if (this.state.searchResults) {
-            searchResultsPanel = (
-                <ScrollPanel ref="searchResultsPanel"
-                    className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
-                    onFillRequest={this.onSearchResultsFillRequest}
-                    onResize={this.onSearchResultsResize}
-                >
-                    <li className={scrollheader_classes}></li>
-                    { this.getSearchResultTiles() }
-                </ScrollPanel>
-            );
+            // show searching spinner
+            if (this.state.searchResults.results === undefined) {
+                searchResultsPanel = (<div className="mx_RoomView_messagePanel mx_RoomView_messagePanelSearchSpinner" />);
+            } else {
+                searchResultsPanel = (
+                    <ScrollPanel ref="searchResultsPanel"
+                        className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
+                        onFillRequest={this.onSearchResultsFillRequest}
+                        onResize={this.onSearchResultsResize}
+                    >
+                        <li className={scrollheader_classes}></li>
+                        { this.getSearchResultTiles() }
+                    </ScrollPanel>
+                );
+            }
             hideMessagePanel = true;
         }