From 2314369052237a66048d107d3b479d137b0da5df Mon Sep 17 00:00:00 2001
From: Beto Dealmeida <roberto@dealmeida.net>
Date: Mon, 11 Mar 2024 19:00:13 -0400
Subject: [PATCH] feat: show more information when loading chart (#27255)

(cherry picked from commit fbc8943fbd88c2270aa62477fbf0e2fe496b1b98)
---
 .../src/components/Chart/Chart.jsx            | 64 +++++++++++++++----
 1 file changed, 50 insertions(+), 14 deletions(-)

diff --git a/superset-frontend/src/components/Chart/Chart.jsx b/superset-frontend/src/components/Chart/Chart.jsx
index 4b8e82975ede7..b7d09dfd31ab8 100644
--- a/superset-frontend/src/components/Chart/Chart.jsx
+++ b/superset-frontend/src/components/Chart/Chart.jsx
@@ -128,6 +128,20 @@ const Styles = styled.div`
   }
 `;
 
+const LoadingDiv = styled.div`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+const MessageSpan = styled.span`
+  display: block;
+  margin: ${({ theme }) => theme.gridUnit * 4}px auto;
+  width: fit-content;
+  color: ${({ theme }) => theme.colors.grayscale.base};
+`;
+
 const MonospaceDiv = styled.div`
   font-family: ${({ theme }) => theme.typography.families.monospace};
   word-break: break-word;
@@ -232,16 +246,49 @@ class Chart extends React.PureComponent {
     );
   }
 
+  renderSpinner(databaseName) {
+    const message = databaseName
+      ? t('Waiting on %s', databaseName)
+      : t('Waiting on database...');
+
+    return (
+      <LoadingDiv>
+        <Loading position="inline-centered" />
+        <MessageSpan>{message}</MessageSpan>
+      </LoadingDiv>
+    );
+  }
+
+  renderChartContainer() {
+    return (
+      <div className="slice_container" data-test="slice-container">
+        {this.props.isInView ||
+        !isFeatureEnabled(FeatureFlag.DashboardVirtualization) ||
+        isCurrentUserBot() ? (
+          <ChartRenderer
+            {...this.props}
+            source={this.props.dashboardId ? 'dashboard' : 'explore'}
+            data-test={this.props.vizType}
+          />
+        ) : (
+          <Loading />
+        )}
+      </div>
+    );
+  }
+
   render() {
     const {
       height,
       chartAlert,
       chartStatus,
+      datasource,
       errorMessage,
       chartIsStale,
       queriesResponse = [],
       width,
     } = this.props;
+    const databaseName = datasource?.database?.name;
 
     const isLoading = chartStatus === 'loading';
     this.renderContainerStartTime = Logger.getTimestamp();
@@ -297,20 +344,9 @@ class Chart extends React.PureComponent {
           height={height}
           width={width}
         >
-          <div className="slice_container" data-test="slice-container">
-            {this.props.isInView ||
-            !isFeatureEnabled(FeatureFlag.DashboardVirtualization) ||
-            isCurrentUserBot() ? (
-              <ChartRenderer
-                {...this.props}
-                source={this.props.dashboardId ? 'dashboard' : 'explore'}
-                data-test={this.props.vizType}
-              />
-            ) : (
-              <Loading />
-            )}
-          </div>
-          {isLoading && <Loading />}
+          {isLoading
+            ? this.renderSpinner(databaseName)
+            : this.renderChartContainer()}
         </Styles>
       </ErrorBoundary>
     );