Skip to content

fix(loading): improve loading screen theming for dark mode support #35129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eschutho merged 6 commits into from
Oct 3, 2025
+26 −10
Merged

fix(loading): improve loading screen theming for dark mode support #35129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
866ecd4
fix(loading): improve loading screen theming for dark mode support
eschutho Sep 13, 2025
90bebef
Implement dark mode and update loading indicators
eschutho Sep 13, 2025
86a19a7
Remove fallback loading message in spa.html
eschutho Sep 13, 2025
951b48d
fix(loading): add aria-label for accessibility
eschutho Sep 25, 2025
1faaa21
fix(spa): remove trailing whitespace in spa.html
eschutho Oct 3, 2025
032abe7
fix(tests): improve reliability of pre-filter validation test
eschutho Oct 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,13 @@ describe('SuperChartCore', () => {
);

await waitFor(() => {
expect(container).toBeEmptyDOMElement();
// Should not render any chart content, only the antd App wrapper
expect(
container.querySelector('.test-component'),
).not.toBeInTheDocument();
expect(
container.querySelector('[data-test="chart-container"]'),
).not.toBeInTheDocument();
});
});
});
Expand Down
6 changes: 3 additions & 3 deletions ...end/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,9 +346,9 @@ test('validates the pre-filter value', async () => {
jest.runOnlyPendingTimers();
jest.useRealTimers();

await waitFor(() => {
expect(screen.getByText(PRE_FILTER_REQUIRED_REGEX)).toBeInTheDocument();
});
expect(
await screen.findByText(PRE_FILTER_REQUIRED_REGEX),
).toBeInTheDocument();
}, 50000); // Slow-running test, increase timeout to 50 seconds.
Copy link
Member Author

@eschutho eschutho Oct 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fix for a flaky test


// eslint-disable-next-line jest/no-disabled-tests
Expand Down
22 changes: 16 additions & 6 deletions superset/templates/superset/spa.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,20 @@

{% block head_meta %}{% endblock %}

<style>
body {
background: #fff;
color: #000;
}

@media (prefers-color-scheme: dark) {
body {
background: #000;
color: #fff;
}
}
</style>
Comment on lines +33 to +45
Copy link

@korbit-ai korbit-ai bot Sep 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Redundant CSS causing style conflicts category Performance

Tell me more
What is the issue?

Inline CSS in the head creates redundant style application that conflicts with existing theme-based styling on the body element.

Why this matters

The body element already has inline styling with theme tokens (background-color: {{ tokens.get('colorBgBase', '#ffffff') }}), causing the browser to process and apply multiple conflicting background styles, leading to unnecessary style recalculation and potential visual flashing during theme transitions.

Suggested change ∙ Feature Preview

Remove the inline <style> block and integrate dark mode support directly into the existing body inline style using CSS custom properties or conditional template logic to avoid duplicate style processing:

<body style="margin: 0; padding: 0; background-color: {{ tokens.get('colorBgBase', '#ffffff') }}; color: {{ tokens.get('colorTextBase', '#000000') }};">
Provide feedback to improve future suggestions

Nice Catch Incorrect Not in Scope Not in coding standard Other

💬 Looking for more details? Reply to this comment to chat with Korbit.


{% block head_css %}
{% for favicon in favicons %}
<link
Expand Down Expand Up @@ -85,14 +99,10 @@
<!-- Custom URL from theme -->
<img
src="{{ tokens.brandSpinnerUrl }}"
alt="Loading..."
alt=""
aria-label="Loading"
style="{{ spinner_style }}"
/>
{% else %}
<!-- Fallback: This should rarely happen with new logic -->
<div style="{{ spinner_style }}">
Loading...
</div>
{% endif %}
</div>
{% endblock %}
Expand Down
Loading