fix(dashboard): Avoid calling loadData for invisible charts on virtual rendering (#37452)

docs/static/feature-flags.json

@@ -247,6 +247,13 @@
         "description": "Enables dashboard virtualization for improved performance",
         "category": "path_to_deprecation"
       },
+      {
+        "name": "DASHBOARD_VIRTUALIZATION_DEFER_DATA",
+        "default": false,
+        "lifecycle": "stable",
+        "description": "Supports simultaneous data and dashboard virtualization for backend performance",
+        "category": "runtime_config"
+      },
       {
         "name": "DATAPANEL_CLOSED_BY_DEFAULT",
         "default": false,

superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts

@@ -34,6 +34,7 @@ export enum FeatureFlag {
   ConfirmDashboardDiff = 'CONFIRM_DASHBOARD_DIFF',
   CssTemplates = 'CSS_TEMPLATES',
   DashboardVirtualization = 'DASHBOARD_VIRTUALIZATION',
+  DashboardVirtualizationDeferData = 'DASHBOARD_VIRTUALIZATION_DEFER_DATA',
   DashboardRbac = 'DASHBOARD_RBAC',
   DatapanelClosedByDefault = 'DATAPANEL_CLOSED_BY_DEFAULT',
   DatasetFolders = 'DATASET_FOLDERS',

superset-frontend/src/components/Chart/Chart.tsx

@@ -192,7 +192,21 @@ class Chart extends PureComponent<ChartProps, {}> {
     }
   }
 
+  shouldRenderChart() {
+    return (
+      this.props.isInView ||
+      !isFeatureEnabled(FeatureFlag.DashboardVirtualization) ||
+      isCurrentUserBot()
+    );
+  }
+
   runQuery() {
+    if (
+      isFeatureEnabled(FeatureFlag.DashboardVirtualizationDeferData) &&
+      !this.shouldRenderChart()
+    ) {
+      return;
+    }
     // Create chart with POST request
     this.props.actions.postChartFormData(
       this.props.formData,
@@ -295,9 +309,7 @@ class Chart extends PureComponent<ChartProps, {}> {
   renderChartContainer() {
     return (
       <div className="slice_container" data-test="slice-container">
-        {this.props.isInView ||
-        !isFeatureEnabled(FeatureFlag.DashboardVirtualization) ||
-        isCurrentUserBot() ? (
+        {this.shouldRenderChart() ? (
           <ChartRenderer
             {...this.props}
             source={this.props.dashboardId ? 'dashboard' : 'explore'}

superset/config.py

@@ -703,6 +703,10 @@ DEFAULT_FEATURE_FLAGS: dict[str, bool] = {
     # @category: runtime_config
     # @docs: https://superset.apache.org/docs/using-superset/creating-your-first-dashboard
     "DASHBOARD_RBAC": False,
+    # Supports simultaneous data and dashboard virtualization for backend performance
+    # @lifecycle: stable
+    # @category: runtime_config
+    "DASHBOARD_VIRTUALIZATION_DEFER_DATA": False,
     # Data panel closed by default in chart builder
     # @lifecycle: stable
     # @category: runtime_config

superset/views/base.py

@@ -94,6 +94,7 @@ FRONTEND_CONF_KEYS = (
     "DASHBOARD_AUTO_REFRESH_MODE",
     "DASHBOARD_AUTO_REFRESH_INTERVALS",
     "DASHBOARD_VIRTUALIZATION",
+    "DASHBOARD_VIRTUALIZATION_DEFER_DATA",
     "SCHEDULED_QUERIES",
     "EXCEL_EXTENSIONS",
     "CSV_EXTENSIONS",