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 = (
-