1 files changed, 27 insertions, 2 deletions

diff --git a/webapp/components/search_results.jsx b/webapp/components/search_results.jsx
index 1d1627950..1499c8abb 100644
--- a/webapp/components/search_results.jsx
+++ b/webapp/components/search_results.jsx
@@ -39,7 +39,8 @@ function getStateFromStores() {
         results,
         channels,
         searchTerm: SearchStore.getSearchTerm(),
-        flaggedPosts: PreferenceStore.getCategory(Constants.Preferences.CATEGORY_FLAGGED_POST)
+        flaggedPosts: PreferenceStore.getCategory(Constants.Preferences.CATEGORY_FLAGGED_POST),
+        loading: SearchStore.isLoading()
     };
 }
 
@@ -71,6 +72,7 @@ export default class SearchResults extends React.Component {
     componentDidMount() {
         this.mounted = true;
 
+        SearchStore.addSearchTermChangeListener(this.onSearchTermChange);
         SearchStore.addSearchChangeListener(this.onChange);
         ChannelStore.addChangeListener(this.onChange);
         PreferenceStore.addChangeListener(this.onPreferenceChange);
@@ -113,6 +115,7 @@ export default class SearchResults extends React.Component {
     componentWillUnmount() {
         this.mounted = false;
 
+        SearchStore.removeSearchTermChangeListener(this.onSearchTermChange);
         SearchStore.removeSearchChangeListener(this.onChange);
         ChannelStore.removeChangeListener(this.onChange);
         PreferenceStore.removeChangeListener(this.onPreferenceChange);
@@ -144,6 +147,14 @@ export default class SearchResults extends React.Component {
         });
     }
 
+    onSearchTermChange(doSearch) {
+        if (this.mounted && doSearch) {
+            this.setState({
+                loading: true
+            });
+        }
+    }
+
     onChange() {
         if (this.mounted) {
             this.setState(getStateFromStores());
@@ -175,7 +186,20 @@ export default class SearchResults extends React.Component {
 
         var ctls = null;
 
-        if (this.props.isFlaggedPosts && noResults) {
+        if (this.state.loading) {
+            ctls =
+            (
+                <div className='sidebar--right__subheader'>
+                    <div className='sidebar--right__loading'>
+                        <i className='fa fa-spinner fa-spin'/>
+                        <FormattedMessage
+                            id='search_header.loading'
+                            defaultMessage='Searching...'
+                        />
+                    </div>
+                </div>
+            );
+        } else if (this.props.isFlaggedPosts && noResults) {
             ctls = (
                 <div className='sidebar--right__subheader'>
                     <ul>
@@ -319,6 +343,7 @@ export default class SearchResults extends React.Component {
                     isFlaggedPosts={this.props.isFlaggedPosts}
                     isPinnedPosts={this.props.isPinnedPosts}
                     channelDisplayName={this.props.channelDisplayName}
+                    isLoading={this.state.loading}
                 />
                 <div
                     id='search-items-container'