fix: Data loading indicator not showing when using pagination (#2768)

Author: dblythy

src/dashboard/Data/Browser/Browser.react.js

@@ -898,6 +898,10 @@ class Browser extends DashboardView {
 
   async fetchParseData(source, filters) {
     const { useMasterKey, skip, limit } = this.state;
+    this.setLoading(true);
+    this.setState({
+      data: null,
+    })
     const query = await queryFromFilters(source, filters);
     const sortDir = this.state.ordering[0] === '-' ? '-' : '+';
     const field = this.state.ordering.substr(sortDir === '-' ? 1 : 0);
@@ -927,6 +931,8 @@ class Browser extends DashboardView {
     this.setState({ isUnique, uniqueField });
 
     const data = await promise;
+
+    this.setLoading(false);
     return data;
   }
 
@@ -2089,6 +2095,7 @@ class Browser extends DashboardView {
               classwiseCloudFunctions={this.state.classwiseCloudFunctions}
               callCloudFunction={this.fetchAggregationPanelData}
               isLoadingCloudFunction={this.state.isLoading}
+              isLoading={this.state.isLoading}
               setLoading={this.setLoading}
               AggregationPanelData={this.state.AggregationPanelData}
               setAggregationPanelData={this.setAggregationPanelData}

src/dashboard/Data/Browser/BrowserTable.react.js

@@ -560,7 +560,7 @@ export default class BrowserTable extends React.Component {
           onResize={this.props.handleResize}
           onAddColumn={this.props.onAddColumn}
           preventSchemaEdits={this.context.preventSchemaEdits}
-          isDataLoaded={!!this.props.data}
+          isDataLoaded={!this.props.isLoading}
           setSelectedObjectId={this.props.setSelectedObjectId}
           setCurrent={this.props.setCurrent}
         />