(superset) 01/01: feat: show more information when loading chart

[be...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

beto pushed a commit to branch sc-75386
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 35ecd281bb7788f1061902a876bafbc5f4d897e9
Author: Beto Dealmeida <ro...@dealmeida.net>
AuthorDate: Thu Feb 22 15:44:15 2024 -0500

    feat: show more information when loading chart
---
 superset-frontend/src/components/Chart/Chart.jsx | 70 +++++++++++++++++++-----
 1 file changed, 56 insertions(+), 14 deletions(-)

diff --git a/superset-frontend/src/components/Chart/Chart.jsx b/superset-frontend/src/components/Chart/Chart.jsx
index 4b8e82975e..927f51f2ce 100644
--- a/superset-frontend/src/components/Chart/Chart.jsx
+++ b/superset-frontend/src/components/Chart/Chart.jsx
@@ -19,6 +19,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {
+  css,
   ensureIsArray,
   FeatureFlag,
   isFeatureEnabled,
@@ -232,16 +233,68 @@ class Chart extends React.PureComponent {
     );
   }
 
+  renderSpinner(chartStatus, databaseName) {
+    const messages = {
+      loading: t('Fetching data from %s', databaseName),
+      success: t('Rendering chart'),
+      rendered: t('Success'),
+    };
+
+    return (
+      <div
+        css={css`
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        `}
+      >
+        <Loading position="inline-centered" />
+        <span
+          // eslint-disable-next-line theme-colors/no-literal-colors
+          css={css`
+            display: block;
+            margin: 16px auto;
+            width: fit-content;
+            color: #666666;
+          `}
+        >
+          {messages[chartStatus]}
+        </span>
+      </div>
+    );
+  }
+
+  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 +350,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(chartStatus, databaseName)
+            : this.renderChartContainer()}
         </Styles>
       </ErrorBoundary>
     );