Dashboard Performance: Debounce loadWidgets

client/app/components/dashboards/DashboardGrid.jsx

@@ -86,6 +86,7 @@ class DashboardGrid extends React.Component {
     isPublic: PropTypes.bool,
     dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
     widgets: PropTypes.arrayOf(WidgetType).isRequired,
+    loadingWidgets: PropTypes.instanceOf(Set).isRequired,
     filters: FiltersType,
     onBreakpointChange: PropTypes.func,
     onLoadWidget: PropTypes.func,
@@ -231,6 +232,7 @@ class DashboardGrid extends React.Component {
       onParameterMappingsChange,
       filters,
       dashboard,
+      loadingWidgets,
       isPublic,
       widgets,
     } = this.props;
@@ -264,7 +266,7 @@ class DashboardGrid extends React.Component {
                 widget={widget}
                 filters={filters}
                 isPublic={isPublic}
-                isLoading={widget.loading}
+                isLoading={loadingWidgets.has(widget.id)}
                 canEdit={dashboard.canEdit()}
                 onLoadWidget={onLoadWidget}
                 onRefreshWidget={onRefreshWidget}

client/app/pages/dashboards/DashboardPage.jsx

@@ -63,6 +63,7 @@ function DashboardComponent(props) {
   const dashboardOptions = useDashboard(props.dashboard);
   const {
     dashboard,
+    loadingWidgets,
     filters,
     setFilters,
     loadDashboard,
@@ -94,6 +95,7 @@ function DashboardComponent(props) {
         <DashboardGrid
           dashboard={dashboard}
           widgets={dashboard.widgets}
+          loadingWidgets={loadingWidgets}
           filters={filters}
           isEditing={editingLayout}
           onLayoutChange={editingLayout ? saveDashboardLayout : () => {}}

client/app/pages/dashboards/PublicDashboardPage.jsx

@@ -14,9 +14,15 @@ import useDashboard from "./hooks/useDashboard";
 import "./PublicDashboardPage.less";
 
 function PublicDashboard({ dashboard }) {
-  const { globalParameters, filters, setFilters, refreshDashboard, loadWidget, refreshWidget } = useDashboard(
-    dashboard
-  );
+  const {
+    globalParameters,
+    filters,
+    loadingWidgets,
+    setFilters,
+    refreshDashboard,
+    loadWidget,
+    refreshWidget,
+  } = useDashboard(dashboard);
 
   return (
     <div className="container p-t-10 p-b-20">
@@ -35,6 +41,7 @@ function PublicDashboard({ dashboard }) {
         <DashboardGrid
           dashboard={dashboard}
           widgets={dashboard.widgets}
+          loadingWidgets={loadingWidgets}
           filters={filters}
           isEditing={false}
           isPublic

client/app/pages/dashboards/hooks/useDashboard.js

@@ -1,4 +1,5 @@
 import { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import { useDebouncedCallback } from "use-debounce";
 import { isEmpty, includes, compact, map, has, pick, keys, extend, every, get } from "lodash";
 import notification from "@/services/notification";
 import location from "@/services/location";
@@ -16,6 +17,8 @@ import useEditModeHandler from "./useEditModeHandler";
 
 export { DashboardStatusEnum } from "./useEditModeHandler";
 
+const LOADING_WIDGETS_DEBOUNCE_TIME = 100;
+
 function getAffectedWidgets(widgets, updatedParameters = []) {
   return !isEmpty(updatedParameters)
     ? widgets.filter(widget =>
@@ -38,6 +41,14 @@ function useDashboard(dashboardData) {
   const [gridDisabled, setGridDisabled] = useState(false);
   const globalParameters = useMemo(() => dashboard.getParametersDefs(), [dashboard]);
   const canEditDashboard = !dashboard.is_archived && dashboard.can_edit;
+
+  const [loadingWidgets, setLoadingWidgets] = useState(new Set());
+  const loadingWidgetValueRef = useRef(loadingWidgets);
+  const [updateLoadingWidgets] = useDebouncedCallback(
+    () => setLoadingWidgets(new Set(loadingWidgetValueRef.current)),
+    LOADING_WIDGETS_DEBOUNCE_TIME
+  );
+
   const isDashboardOwnerOrAdmin = useMemo(
     () =>
       !dashboard.is_archived &&
@@ -92,11 +103,18 @@ function useDashboard(dashboardData) {
     updateDashboard({ is_draft: !dashboard.is_draft }, false);
   }, [dashboard, updateDashboard]);
 
-  const loadWidget = useCallback((widget, forceRefresh = false) => {
-    widget.getParametersDefs(); // Force widget to read parameters values from URL
-    setDashboard(currentDashboard => extend({}, currentDashboard));
-    return widget.load(forceRefresh).finally(() => setDashboard(currentDashboard => extend({}, currentDashboard)));
-  }, []);
+  const loadWidget = useCallback(
+    (widget, forceRefresh = false) => {
+      widget.getParametersDefs(); // Force widget to read parameters values from URL
+      loadingWidgetValueRef.current.add(widget.id);
+      updateLoadingWidgets();
+      return widget.load(forceRefresh).finally(() => {
+        loadingWidgetValueRef.current.delete(widget.id);
+        updateLoadingWidgets();
+      });
+    },
+    [updateLoadingWidgets]
+  );
 
   const refreshWidget = useCallback(widget => loadWidget(widget, true), [loadWidget]);
 
@@ -121,6 +139,7 @@ function useDashboard(dashboardData) {
       return Promise.all(loadWidgetPromises).then(() => {
         const queryResults = compact(map(dashboardRef.current.widgets, widget => widget.getQueryResult()));
         const updatedFilters = collectDashboardFilters(dashboardRef.current, queryResults, location.search);
+        setDashboard(currentDashboard => extend({}, currentDashboard));
         setFilters(updatedFilters);
       });
     },
@@ -203,6 +222,7 @@ function useDashboard(dashboardData) {
 
   return {
     dashboard,
+    loadingWidgets,
     globalParameters,
     refreshing,
     filters,