From bd6a439e0b2a3a76f8aece91f11a7eee2ebf6d29 Mon Sep 17 00:00:00 2001
From: vera-liu <vera.liu@airbnb.com>
Date: Mon, 21 Nov 2016 13:18:18 -0800
Subject: [PATCH] [QuerySearch] Add loading status to QuerySearch page (#1657)

* Add loading state to QuerySearch
 * Move ajax call to ComponentDidMount
 * Show loading image during ajax call
---
 .../SqlLab/components/QuerySearch.jsx         | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/superset/assets/javascripts/SqlLab/components/QuerySearch.jsx b/superset/assets/javascripts/SqlLab/components/QuerySearch.jsx
index f9deb58f47..2356513c9f 100644
--- a/superset/assets/javascripts/SqlLab/components/QuerySearch.jsx
+++ b/superset/assets/javascripts/SqlLab/components/QuerySearch.jsx
@@ -25,10 +25,13 @@ class QuerySearch extends React.PureComponent {
       to: null,
       status: 'success',
       queriesArray: [],
+      queriesLoading: true,
     };
   }
   componentWillMount() {
     this.fetchUsers();
+  }
+  componentDidMount() {
     this.refreshQueries();
   }
   onUserClicked(userId) {
@@ -100,6 +103,7 @@ class QuerySearch extends React.PureComponent {
     });
   }
   refreshQueries() {
+    this.setState({ queriesLoading: true });
     const params = [
       this.state.userId ? `user_id=${this.state.userId}` : '',
       this.state.databaseId ? `database_id=${this.state.databaseId}` : '',
@@ -116,7 +120,7 @@ class QuerySearch extends React.PureComponent {
         for (const id in data) {
           newQueriesArray.push(data[id]);
         }
-        this.setState({ queriesArray: newQueriesArray });
+        this.setState({ queriesArray: newQueriesArray, queriesLoading: false });
       }
     });
   }
@@ -185,16 +189,20 @@ class QuerySearch extends React.PureComponent {
             Search
           </Button>
         </div>
-        <QueryTable
-          columns={[
-            'state', 'db', 'user', 'date',
-            'progress', 'rows', 'sql', 'querylink',
-          ]}
-          onUserClicked={this.onUserClicked.bind(this)}
-          onDbClicked={this.onDbClicked.bind(this)}
-          queries={this.state.queriesArray}
-          actions={this.props.actions}
-        />
+        {this.state.queriesLoading ?
+          (<img className="loading" alt="Loading..." src="/static/assets/images/loading.gif" />)
+          :
+          (<QueryTable
+            columns={[
+              'state', 'db', 'user', 'date',
+              'progress', 'rows', 'sql', 'querylink',
+            ]}
+            onUserClicked={this.onUserClicked.bind(this)}
+            onDbClicked={this.onDbClicked.bind(this)}
+            queries={this.state.queriesArray}
+            actions={this.props.actions}
+          />)
+        }
       </div>
     );
   }