diff --git a/superset-frontend/src/components/Chart/Chart.jsx b/superset-frontend/src/components/Chart/Chart.jsx index 4b8e82975..b7d09dfd3 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 ( + + + {message} + + ); + } + + renderChartContainer() { + return ( +
+ {this.props.isInView || + !isFeatureEnabled(FeatureFlag.DashboardVirtualization) || + isCurrentUserBot() ? ( + + ) : ( + + )} +
+ ); + } + 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} > -
- {this.props.isInView || - !isFeatureEnabled(FeatureFlag.DashboardVirtualization) || - isCurrentUserBot() ? ( - - ) : ( - - )} -
- {isLoading && } + {isLoading + ? this.renderSpinner(databaseName) + : this.renderChartContainer()} );