From 76bfd279b34f960149dba15424593dfd5fbfb956 Mon Sep 17 00:00:00 2001
From: Jonathan <jonfritz@gmail.com>
Date: Wed, 2 Aug 2017 15:38:54 -0400
Subject: PLT-7140: On slow connection searching should clear RHS and show
 spinner (#7014)

* Added a RECEIVED_SEARCH_TERM event on search form submit, attempted to modify Search Results Header title when loading search results

* Fixed RHS behaviour so that loading icon is shown while waiting for search results on slow connections.

* PLT-7140: Fixed all eslint issues

* PLT-7140: reverted changes to config/config.json that were accidentally committed

* PLT-7140: Removed all static function decorators that I previously added to jsx files. These were suggested by eslint, but can cause issues for functions that override parent functionality. still can't reproduce the errors seen on spinmint locally, so I'm guessing at this point

* PLT-7140: Changed var to const

* Updating UI for search results loading (#7096)
---
 webapp/components/search_results.jsx | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

(limited to 'webapp/components/search_results.jsx')

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'
-- 
cgit v1.2.3-1-g7c22

