4 files changed, 41 insertions, 6 deletions

diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index c635c5eb1..f2fed25ca 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -171,7 +171,16 @@ export default class SearchBar extends React.Component {
 
     handleSubmit(e) {
         e.preventDefault();
-        this.handleSearch(this.state.searchTerm.trim());
+        const terms = this.state.searchTerm.trim();
+
+        AppDispatcher.handleServerAction({
+            type: ActionTypes.RECEIVED_SEARCH_TERM,
+            term: terms,
+            do_search: true,
+            is_mention_search: false
+        });
+
+        this.handleSearch(terms);
         this.search.blur();
     }
 
@@ -221,7 +230,7 @@ export default class SearchBar extends React.Component {
 
         var isSearching = null;
         if (this.state.isSearching) {
-            isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}/>;
+            isSearching = <span className={'fa fa-spin fa-spinner'}/>;
         }
 
         let helpClass = 'search-help-popover';
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'
diff --git a/webapp/components/search_results_header.jsx b/webapp/components/search_results_header.jsx
index 467b77e27..b3f77c413 100644
--- a/webapp/components/search_results_header.jsx
+++ b/webapp/components/search_results_header.jsx
@@ -148,5 +148,6 @@ SearchResultsHeader.propTypes = {
     shrink: PropTypes.func,
     isFlaggedPosts: PropTypes.bool,
     isPinnedPosts: PropTypes.bool,
-    channelDisplayName: PropTypes.string.isRequired
+    channelDisplayName: PropTypes.string.isRequired,
+    isLoading: PropTypes.bool.isRequired
 };
diff --git a/webapp/components/sidebar_right/sidebar_right.jsx b/webapp/components/sidebar_right/sidebar_right.jsx
index 737254682..f7c0a6400 100644
--- a/webapp/components/sidebar_right/sidebar_right.jsx
+++ b/webapp/components/sidebar_right/sidebar_right.jsx
@@ -157,7 +157,7 @@ export default class SidebarRight extends React.Component {
 
     onSearchChange() {
         this.setState({
-            searchVisible: SearchStore.getSearchResults() !== null,
+            searchVisible: SearchStore.getSearchResults() !== null || SearchStore.isLoading(),
             isMentionSearch: SearchStore.getIsMentionSearch(),
             isFlaggedPosts: SearchStore.getIsFlaggedPosts(),
             isPinnedPosts: SearchStore.getIsPinnedPosts()