(superset) branch sc-75386 created (now dc2f308c76)

[be...@apache.org]

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

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


      at dc2f308c76 WIP

This branch includes the following new commits:

     new dc2f308c76 WIP

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

(superset) 01/01: WIP

[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 dc2f308c7613a3afae0f21efb0881f3c53e2fb57
Author: Beto Dealmeida <ro...@dealmeida.net>
AuthorDate: Thu Feb 22 15:44:15 2024 -0500

    WIP
---
 superset-frontend/src/components/Chart/Chart.jsx | 31 +++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/components/Chart/Chart.jsx b/superset-frontend/src/components/Chart/Chart.jsx
index 4b8e82975e..12a17c0416 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,44 @@ class Chart extends React.PureComponent {
     );
   }
 
+  renderSpinner(chartStatus, databaseName) {
+    const messages = {
+      // TODO(betodealmeida): show database name
+      loading: t(`Fetching data from ${databaseName}`),
+      success: t('Rendering chart'),
+      rendered: t('Success'),
+    };
+
+    return (
+      <div>
+        <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>
+    );
+  }
+
   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();
@@ -310,7 +339,7 @@ class Chart extends React.PureComponent {
               <Loading />
             )}
           </div>
-          {isLoading && <Loading />}
+          {isLoading && this.renderSpinner(chartStatus, databaseName)}
         </Styles>
       </ErrorBoundary>
     );