mirror of https://github.com/apache/superset.git
feat: show more information when loading chart (#27255)
This commit is contained in:
parent
b1adede1ee
commit
fbc8943fbd
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue