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 <[email protected]> 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> );
