fix: Data browser table shows loading indicator when info panel is loading (#2782)

Author: mtrezza

src/components/AggregationPanel/AggregationPanel.js

@@ -38,7 +38,7 @@ const AggregationPanel = ({
     }
   }, [errorAggregatedData, setSelectedObjectId, setErrorAggregatedData]);
 
-  const isLoading = useMemo(
+  const isLoadingInfoPanel = useMemo(
     () => depth === 0 && selectedObjectId && isLoadingCloudFunction && showAggregatedData,
     [depth, selectedObjectId, isLoadingCloudFunction, showAggregatedData]
   );
@@ -181,7 +181,7 @@ const AggregationPanel = ({
 
   return (
     <div className={styles.aggregationPanel}>
-      {isLoading ? (
+      {isLoadingInfoPanel ? (
         <div className={styles.center}>
           <LoaderDots />
         </div>

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

@@ -111,7 +111,7 @@ class Browser extends DashboardView {
       configData: {},
       classwiseCloudFunctions: {},
       AggregationPanelData: {},
-      isLoading: false,
+      isLoadingInfoPanel: false,
       errorAggregatedData: {},
     };
 
@@ -130,7 +130,7 @@ class Browser extends DashboardView {
     this.showExport = this.showExport.bind(this);
     this.login = this.login.bind(this);
     this.logout = this.logout.bind(this);
-    this.setLoading = this.setLoading.bind(this);
+    this.setLoadingInfoPanel = this.setLoadingInfoPanel.bind(this);
     this.setErrorAggregatedData = this.setErrorAggregatedData.bind(this);
     this.toggleMasterKeyUsage = this.toggleMasterKeyUsage.bind(this);
     this.showAttachRowsDialog = this.showAttachRowsDialog.bind(this);
@@ -255,9 +255,9 @@ class Browser extends DashboardView {
     }
   }
 
-  setLoading(bool) {
+  setLoadingInfoPanel(bool) {
     this.setState({
-      isLoading: bool,
+      isLoadingInfoPanel: bool,
     });
   }
 
@@ -269,7 +269,7 @@ class Browser extends DashboardView {
 
   fetchAggregationPanelData(objectId, className, appId) {
     this.setState({
-      isLoading: true,
+      isLoadingInfoPanel: true,
     });
     const params = {
       object: Parse.Object.extend(className).createWithoutData(objectId).toPointer(),
@@ -283,18 +283,18 @@ class Browser extends DashboardView {
     Parse.Cloud.run(cloudCodeFunction, params, options).then(
       result => {
         if (result && result.panel && result.panel && result.panel.segments) {
-          this.setState({ AggregationPanelData: result, isLoading: false });
+          this.setState({ AggregationPanelData: result, isLoadingInfoPanel: false });
         } else {
           this.setState({
-            isLoading: false,
+            isLoadingInfoPanel: false,
             errorAggregatedData: 'Improper JSON format',
           });
           this.showNote(this.state.errorAggregatedData, true);
         }
       },
       error => {
         this.setState({
-          isLoading: false,
+          isLoadingInfoPanel: false,
           errorAggregatedData: error.message,
         });
         this.showNote(this.state.errorAggregatedData, true);
@@ -898,7 +898,6 @@ class Browser extends DashboardView {
 
   async fetchParseData(source, filters) {
     const { useMasterKey, skip, limit } = this.state;
-    this.setLoading(true);
     this.setState({
       data: null,
     })
@@ -931,8 +930,6 @@ class Browser extends DashboardView {
     this.setState({ isUnique, uniqueField });
 
     const data = await promise;
-
-    this.setLoading(false);
     return data;
   }
 
@@ -1121,7 +1118,7 @@ class Browser extends DashboardView {
         ordering: ordering,
         selection: {},
         errorAggregatedData: {},
-        isLoading: false,
+        isLoadingInfoPanel: false,
         AggregationPanelData: {},
       },
       () => this.fetchData(source, this.state.filters)
@@ -2098,9 +2095,8 @@ class Browser extends DashboardView {
               classes={this.classes}
               classwiseCloudFunctions={this.state.classwiseCloudFunctions}
               callCloudFunction={this.fetchAggregationPanelData}
-              isLoadingCloudFunction={this.state.isLoading}
-              isLoading={this.state.isLoading}
-              setLoading={this.setLoading}
+              isLoadingCloudFunction={this.state.isLoadingInfoPanel}
+              setLoadingInfoPanel={this.setLoadingInfoPanel}
               AggregationPanelData={this.state.AggregationPanelData}
               setAggregationPanelData={this.setAggregationPanelData}
               setErrorAggregatedData={this.setErrorAggregatedData}

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

@@ -6,16 +6,16 @@
  * the root directory of this source tree.
  */
 import BrowserRow from 'components/BrowserRow/BrowserRow.react';
+import Button from 'components/Button/Button.react';
 import DataBrowserHeaderBar from 'components/DataBrowserHeaderBar/DataBrowserHeaderBar.react';
-import Editor from 'dashboard/Data/Browser/Editor.react';
 import EmptyState from 'components/EmptyState/EmptyState.react';
 import Icon from 'components/Icon/Icon.react';
+import { CurrentApp } from 'context/currentApp';
+import styles from 'dashboard/Data/Browser/Browser.scss';
+import Editor from 'dashboard/Data/Browser/Editor.react';
 import Parse from 'parse';
 import encode from 'parse/lib/browser/encode';
 import React from 'react';
-import styles from 'dashboard/Data/Browser/Browser.scss';
-import Button from 'components/Button/Button.react';
-import { CurrentApp } from 'context/currentApp';
 
 const ROW_HEIGHT = 30;
 
@@ -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.isLoading}
+          isDataLoaded={!!this.props.data}
           setSelectedObjectId={this.props.setSelectedObjectId}
           setCurrent={this.props.setCurrent}
         />

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

@@ -192,7 +192,7 @@ export default class DataBrowser extends React.Component {
 
     if (!this.state.isPanelVisible) {
       this.props.setAggregationPanelData({});
-      this.props.setLoading(false);
+      this.props.setLoadingInfoPanel(false);
       if (this.props.errorAggregatedData != {}) {
         this.props.setErrorAggregatedData({});
       }
@@ -587,7 +587,7 @@ export default class DataBrowser extends React.Component {
 
       if (newSelection.size > 1) {
         this.setCurrent(null);
-        this.props.setLoading(false);
+        this.props.setLoadingInfoPanel(false);
         this.setState({
           selectedCells: {
             list: newSelection,