perf: asynchronously fetch classes counts in sidebar to not block das…

…hboard (#1802)

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Add multi-factor authentication to dashboard login. To use one-time password, run `parse-dashboard --createMFA` or `parse-dashboard --createUser`. (Daniel Blyth) [#1624](https://github.com/parse-community/parse-dashboard/pull/1624)
 
 ## Improvements
+- Sidebar: Class counts are now updated when all counts are returned instead of after each call (Christopher Brookes) [#1802](https://github.com/parse-community/parse-dashboard/pull/1802)
 - Update sass to 5.0.0 and make docker image use node:lts-alpine (Corey Baker) [#1792](https://github.com/parse-community/parse-dashboard/pull/1792)
 - Docker image use now node 12 version (Christopher Brookes) [#1788](https://github.com/parse-community/parse-dashboard/pull/1788)
 - CI now pushes docker images to Docker Hub (Corey Baker) [#1781](https://github.com/parse-community/parse-dashboard/pull/1781)

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

@@ -64,6 +64,7 @@ class Browser extends DashboardView {
 
       relation: null,
       counts: {},
+      computingClassCounts: false,
       filteredCounts: {},
       clp: {},
       filters: new List(),
@@ -605,12 +606,21 @@ class Browser extends DashboardView {
     });
   }
 
-  handleFetchedSchema() {
-    this.props.schema.data.get('classes').forEach((_, className) => {
-      this.context.currentApp.getClassCount(className)
-      .then(count => this.setState({ counts: { [className]: count, ...this.state.counts } }));
-    })
-    this.setState({clp: this.props.schema.data.get('CLPs').toJS()});
+  async handleFetchedSchema() {
+    const counts = this.state.counts;
+    if (this.state.computingClassCounts === false) {
+      this.setState({ computingClassCounts: true });
+      for (const parseClass of this.props.schema.data.get('classes')) {
+        const [className] = parseClass;
+        counts[className] = await this.context.currentApp.getClassCount(className);
+      }
+
+      this.setState({
+        clp: this.props.schema.data.get('CLPs').toJS(),
+        counts,
+        computingClassCounts: false
+      });
+    }
   }
 
   async refresh() {