You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2025/08/03 09:38:23 UTC
(superset) 01/07: refactor(StatefulChart): Use consistent Loading component
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch matrixify
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 148e1c9267cf470f22090b5104f430ce1166a5c8
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Sat Aug 2 20:25:39 2025 -0700
refactor(StatefulChart): Use consistent Loading component
- Replace custom loading div with the standard Loading component
- Import Loading from @superset-ui/core/components
- Use position='floating' for centered loading indicator
- Maintain proper container sizing for percentage-based dimensions
This ensures consistent loading UI across the application.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <no...@anthropic.com>
---
.../src/chart/components/StatefulChart.tsx | 26 ++++++++--------------
1 file changed, 9 insertions(+), 17 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-core/src/chart/components/StatefulChart.tsx b/superset-frontend/packages/superset-ui-core/src/chart/components/StatefulChart.tsx
index a2f1fddbd8..df063c7556 100644
--- a/superset-frontend/packages/superset-ui-core/src/chart/components/StatefulChart.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/chart/components/StatefulChart.tsx
@@ -26,6 +26,7 @@ import {
buildQueryContext,
RequestConfig,
} from '../..';
+import { Loading } from '../../components';
import ChartClient from '../clients/ChartClient';
import getChartBuildQueryRegistry from '../registries/ChartBuildQueryRegistrySingleton';
import getChartMetadataRegistry from '../registries/ChartMetadataRegistrySingleton';
@@ -262,23 +263,13 @@ export default class StatefulChart extends Component<
return <LoadingComponent />;
}
- const loadingDiv = (
- <div
- style={{
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- height: '100%',
- width: '100%',
- }}
- >
- Loading...
- </div>
- );
-
- // If using percentage sizing, wrap in a container
+ // If using percentage sizing, wrap Loading in a container
if (width === '100%' || height === '100%') {
- return <div style={{ width, height }}>{loadingDiv}</div>;
+ return (
+ <div style={{ width, height, position: 'relative' }}>
+ <Loading position="floating" />
+ </div>
+ );
}
return (
@@ -286,9 +277,10 @@ export default class StatefulChart extends Component<
style={{
width: typeof width === 'number' ? `${width}px` : width,
height: typeof height === 'number' ? `${height}px` : height,
+ position: 'relative',
}}
>
- {loadingDiv}
+ <Loading position="floating" />
</div>
);
}