chore(Dashboard): Remove unnecessary loading

superset-frontend/spec/fixtures/mockDashboardState.js

@@ -30,6 +30,8 @@ export default {
   css: '',
   focusedFilterField: null,
   refreshFrequency: 0,
+  dataMaskHydrated: true,
+  dashboardHydrated: true,
 };
 
 export const overwriteConfirmMetadata = {

superset-frontend/src/components/Chart/chartReducer.ts

@@ -38,7 +38,7 @@ export const chart: ChartState = {
   sliceFormData: null,
   queryController: null,
   queriesResponse: null,
-  triggerQuery: true,
+  triggerQuery: false,
   lastRendered: 0,
 };
 
@@ -55,6 +55,7 @@ export default function chartReducer(
       return {
         ...chart,
         ...action.chart,
+        triggerQuery: true,
       };
     },
     [actions.CHART_UPDATE_SUCCEEDED](state) {

superset-frontend/src/dashboard/actions/dashboardState.js

@@ -731,3 +731,8 @@ export const updateDashboardLabelsColor = () => async (dispatch, getState) => {
     console.error('Failed to update dashboard color settings:', error);
   }
 };
+
+export const ON_LEAVE_DASHBOARD = 'ON_LEAVE_DASHBOARD';
+export function onLeaveDashboard() {
+  return { type: ON_LEAVE_DASHBOARD };
+}

superset-frontend/src/dashboard/actions/hydrate.js

@@ -55,9 +55,26 @@ import updateComponentParentsList from '../util/updateComponentParentsList';
 import { FilterBarOrientation } from '../types';
 
 export const HYDRATE_DASHBOARD = 'HYDRATE_DASHBOARD';
+export const HYDRATE_DASHBOARD_DATAMASK = 'HYDRATE_DASHBOARD_DATAMASK';
+export const HYDRATE_DASHBOARD_ACTIVETABS = 'HYDRATE_DASHBOARD_ACTIVETABS';
+
+export const hydrateDashboardDataMask = (dataMask, dashboardInfo) => dispatch =>
+  dispatch({
+    type: HYDRATE_DASHBOARD_DATAMASK,
+    data: {
+      dataMask,
+      dashboardInfo,
+    },
+  });
+
+export const hydrateDashboardActiveTabs = activeTabs => dispatch =>
+  dispatch({
+    type: HYDRATE_DASHBOARD_ACTIVETABS,
+    data: activeTabs || [],
+  });
 
 export const hydrateDashboard =
-  ({ history, dashboard, charts, dataMask, activeTabs }) =>
+  ({ history, dashboard, charts }) =>
   (dispatch, getState) => {
     const { user, common, dashboardState } = getState();
     const { metadata, position_data: positionData } = dashboard;
@@ -286,7 +303,6 @@ export const hydrateDashboard =
             FilterBarOrientation.Vertical,
           crossFiltersEnabled,
         },
-        dataMask,
         dashboardFilters,
         nativeFilters,
         dashboardState: {
@@ -311,8 +327,9 @@ export const hydrateDashboard =
           lastModifiedTime: dashboard.changed_on,
           isRefreshing: false,
           isFiltersRefreshing: false,
-          activeTabs: activeTabs || dashboardState?.activeTabs || [],
+          activeTabs: dashboardState?.activeTabs || [],
           datasetsStatus: ResourceStatus.Loading,
+          dashboardHydrated: true,
         },
         dashboardLayout,
       },

superset-frontend/src/dashboard/components/Dashboard.jsx

@@ -16,12 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { PureComponent } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { isFeatureEnabled, t, FeatureFlag } from '@superset-ui/core';
 
 import { PluginContext } from 'src/components/DynamicPlugins';
-import Loading from 'src/components/Loading';
 import getBootstrapData from 'src/utils/getBootstrapData';
 import getChartIdsFromLayout from '../util/getChartIdsFromLayout';
 import getLayoutComponentFromChartId from '../util/getLayoutComponentFromChartId';
@@ -68,7 +67,7 @@ const defaultProps = {
   userId: '',
 };
 
-class Dashboard extends PureComponent {
+class Dashboard extends Component {
   static contextType = PluginContext;
 
   static onBeforeUnload(hasChanged) {
@@ -90,6 +89,13 @@ class Dashboard extends PureComponent {
     this.appliedFilters = props.activeFilters ?? {};
     this.appliedOwnDataCharts = props.ownDataCharts ?? {};
     this.onVisibilityChange = this.onVisibilityChange.bind(this);
+    this.applyCharts = this.applyCharts.bind(this);
+
+    this.state = {
+      prevActiveFilters: {},
+      prevOwnDataCharts: {},
+      hasTriggered: false,
+    };
   }
 
   componentDidMount() {
@@ -117,13 +123,41 @@ class Dashboard extends PureComponent {
       };
     }
     window.addEventListener('visibilitychange', this.onVisibilityChange);
-    this.applyCharts();
   }
 
   componentDidUpdate() {
     this.applyCharts();
   }
 
+  shouldComponentUpdate(nextProps) {
+    const { activeFilters, ownDataCharts, chartConfiguration, dashboardState } =
+      this.props;
+    const nextDataMaskHydrated = nextProps.dashboardState.dataMaskHydrated;
+    const nextActiveFilters = nextProps.activeFilters;
+    const nextOwnDataCharts = nextProps.ownDataCharts;
+    const nextChartConfiguration = nextProps.chartConfiguration;
+    const nextDashboardState = nextProps.dashboardState;
+
+    if (
+      nextDataMaskHydrated &&
+      (!areObjectsEqual(dashboardState, nextDashboardState, {
+        ignoreUndefined: true,
+      }) ||
+        !areObjectsEqual(activeFilters, nextActiveFilters, {
+          ignoreUndefined: true,
+        }) ||
+        !areObjectsEqual(ownDataCharts, nextOwnDataCharts, {
+          ignoreUndefined: true,
+        }) ||
+        !areObjectsEqual(chartConfiguration, nextChartConfiguration, {
+          ignoreUndefined: true,
+        }))
+    ) {
+      return true;
+    }
+    return false;
+  }
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     const currentChartIds = getChartIdsFromLayout(this.props.layout);
     const nextChartIds = getChartIdsFromLayout(nextProps.layout);
@@ -158,7 +192,11 @@ class Dashboard extends PureComponent {
     const { hasUnsavedChanges, editMode } = this.props.dashboardState;
 
     const { appliedFilters, appliedOwnDataCharts } = this;
-    const { activeFilters, ownDataCharts, chartConfiguration } = this.props;
+    const { activeFilters, ownDataCharts, chartConfiguration, dashboardState } =
+      this.props;
+
+    const { dataMaskHydrated } = dashboardState;
+
     if (
       isFeatureEnabled(FeatureFlag.DashboardCrossFilters) &&
       !chartConfiguration
@@ -168,16 +206,41 @@ class Dashboard extends PureComponent {
       return;
     }
 
-    if (
-      !editMode &&
-      (!areObjectsEqual(appliedOwnDataCharts, ownDataCharts, {
-        ignoreUndefined: true,
-      }) ||
+    if (dataMaskHydrated) {
+      const hasFilters =
+        Object.keys(activeFilters).length > 0 ||
+        Object.keys(ownDataCharts).length > 0;
+      const hadFilters =
+        Object.keys(this.state.prevActiveFilters).length > 0 ||
+        Object.keys(this.state.prevOwnDataCharts).length > 0;
+      const { hasTriggered } = this.state;
+
+      const filtersChanged =
+        !areObjectsEqual(appliedOwnDataCharts, ownDataCharts, {
+          ignoreUndefined: true,
+        }) ||
         !areObjectsEqual(appliedFilters, activeFilters, {
           ignoreUndefined: true,
-        }))
-    ) {
-      this.applyFilters();
+        });
+
+      // triggers when filters are/were present and are changed/removed
+      if (!editMode && filtersChanged && (hasFilters || hadFilters)) {
+        this.setState({
+          prevActiveFilters: activeFilters,
+          prevOwnDataCharts: ownDataCharts,
+          hasTriggered: true,
+        });
+        this.applyFilters();
+      }
+      // triggers for dashboards with no filters
+      if (
+        (editMode || (!hasFilters && !hadFilters)) &&
+        dashboardState.sliceIds.length > 0 &&
+        !hasTriggered
+      ) {
+        this.setState({ hasTriggered: true });
+        this.refreshCharts(dashboardState.sliceIds);
+      }
     }
 
     if (hasUnsavedChanges) {
@@ -190,6 +253,7 @@ class Dashboard extends PureComponent {
   componentWillUnmount() {
     window.removeEventListener('visibilitychange', this.onVisibilityChange);
     this.props.actions.clearDataMaskState();
+    this.props.actions.onLeaveDashboard();
   }
 
   onVisibilityChange() {
@@ -276,9 +340,6 @@ class Dashboard extends PureComponent {
   }
 
   render() {
-    if (this.context.loading) {
-      return <Loading />;
-    }
     return this.props.children;
   }
 }

superset-frontend/src/dashboard/components/Dashboard.test.jsx

@@ -133,6 +133,7 @@ describe('Dashboard', () => {
     });
 
     it('should not call refresh when is editMode', () => {
+      wrapper.setState({ hasTriggered: true });
       wrapper.setProps({
         dashboardState: {
           ...dashboardState,
@@ -147,7 +148,9 @@ describe('Dashboard', () => {
       wrapper.setProps({
         activeFilters: OVERRIDE_FILTERS,
       });
+
       wrapper.instance().componentDidUpdate(prevProps);
+
       expect(refreshSpy.callCount).toBe(0);
       expect(wrapper.instance().appliedFilters).toBe(OVERRIDE_FILTERS);
     });
@@ -186,6 +189,9 @@ describe('Dashboard', () => {
     });
 
     it('should call refresh if a filter is removed', () => {
+      wrapper.setState({
+        prevActiveFilters: OVERRIDE_FILTERS,
+      });
       wrapper.setProps({
         activeFilters: {},
       });

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -374,6 +374,9 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
   const dispatch = useDispatch();
   const uiConfig = useUiConfig();
   const theme = useTheme();
+  const isDashboardHydrated = useSelector<RootState, boolean>(
+    state => state.dashboardState.dashboardHydrated,
+  );
 
   const dashboardId = useSelector<RootState, string>(
     ({ dashboardInfo }) => `${dashboardInfo.id}`,
@@ -463,12 +466,18 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
 
   const {
     showDashboard,
+    requiredFirstFilter,
     missingInitialFilters,
     dashboardFiltersOpen,
     toggleDashboardFiltersOpen,
     nativeFiltersEnabled,
   } = useNativeFilters();
 
+  // Unblocking the Dashboard rendering unless filters are required
+  const canShowDashboard = !requiredFirstFilter.length
+    ? true
+    : showDashboard && isDashboardHydrated;
+
   const [containerRef, isSticky] = useElementOnScreen<HTMLDivElement>({
     threshold: [1],
   });
@@ -675,8 +684,8 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
             editMode={editMode}
             marginLeft={dashboardContentMarginLeft}
           >
-            {showDashboard ? (
-              missingInitialFilters.length > 0 ? (
+            {canShowDashboard ? (
+              !editMode && missingInitialFilters.length > 0 ? (
                 <div
                   css={css`
                     display: flex;

superset-frontend/src/dashboard/components/DashboardBuilder/state.ts

@@ -81,6 +81,7 @@ export const useNativeFilters = () => {
 
   return {
     showDashboard,
+    requiredFirstFilter,
     missingInitialFilters,
     dashboardFiltersOpen,
     toggleDashboardFiltersOpen,

superset-frontend/src/dashboard/components/gridComponents/Chart.jsx

@@ -83,6 +83,7 @@ const propTypes = {
   datasetsStatus: PropTypes.oneOf(['loading', 'error', 'complete']),
   isInView: PropTypes.bool,
   emitCrossFilters: PropTypes.bool,
+  isDashboardHydrated: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -418,7 +419,13 @@ class Chart extends Component {
     }
 
     const { queriesResponse, chartUpdateEndTime, chartStatus } = chart;
-    const isLoading = chartStatus === 'loading';
+
+    // Controlling the status of a Chart based on Dashboard hydration
+    const { isDashboardHydrated } = this.props;
+    const controlledChartStatus = isDashboardHydrated ? chartStatus : 'loading';
+    const { triggerQuery } = chart;
+    const isLoading = controlledChartStatus === 'loading';
+
     // eslint-disable-next-line camelcase
     const isCached = queriesResponse?.map(({ is_cached }) => is_cached) || [];
     const cachedDttm =
@@ -465,7 +472,7 @@ class Chart extends Component {
           addDangerToast={addDangerToast}
           handleToggleFullSize={handleToggleFullSize}
           isFullSize={isFullSize}
-          chartStatus={chart.chartStatus}
+          chartStatus={controlledChartStatus}
           formData={formData}
           width={width}
           height={this.getHeaderHeight()}
@@ -510,7 +517,7 @@ class Chart extends Component {
             annotationData={chart.annotationData}
             chartAlert={chart.chartAlert}
             chartId={id}
-            chartStatus={chartStatus}
+            chartStatus={controlledChartStatus}
             datasource={datasource}
             dashboardId={dashboardId}
             initialValues={initialValues}
@@ -521,7 +528,7 @@ class Chart extends Component {
             filterState={filterState}
             queriesResponse={chart.queriesResponse}
             timeout={timeout}
-            triggerQuery={chart.triggerQuery}
+            triggerQuery={triggerQuery}
             vizType={slice.viz_type}
             setControlValue={setControlValue}
             postTransformProps={postTransformProps}

superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx

@@ -68,6 +68,7 @@ const props = {
   supersetCanExplore: false,
   supersetCanCSV: false,
   supersetCanShare: false,
+  isDashboardHydrated: true,
 };
 
 function setup(overrideProps) {

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/selectors.ts

@@ -33,7 +33,7 @@ export const crossFiltersSelector = (props: {
   verboseMaps: { [key: string]: Record<string, string> };
 }): CrossFilterIndicator[] => {
   const { dataMask, chartConfiguration, dashboardLayout, verboseMaps } = props;
-  const chartsIds = Object.keys(chartConfiguration);
+  const chartsIds = Object.keys(chartConfiguration || {});
 
   return chartsIds
     .map(chartId => {

superset-frontend/src/dashboard/containers/Chart.jsx

@@ -101,6 +101,7 @@ function mapStateToProps(
     setControlValue,
     datasetsStatus,
     emitCrossFilters: !!dashboardInfo.crossFiltersEnabled,
+    isDashboardHydrated: !!dashboardState.dashboardHydrated,
   };
 }