fix(loading): improve loading screen theming for dark mode support #35129
+44
−21
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…filter sorting, and fix modal theming - Remove top padding from horizontal filter bar to eliminate visual gap - Set themed background color on loading screen to respect dark mode - Remove fallback "Loading..." text to prevent Times New Roman display - Use colorBgBase theme token for proper light/dark mode support - Fix filter value sorting to preserve backend metric-based order when sortMetric is specified - Make Modal.confirm theme-aware to respect current light/dark mode 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Add App wrapper to SupersetThemeProvider to enable theme inheritance for imperative modals - Modal.confirm dialogs now properly inherit dark/light theme from ConfigProvider - Simplifies theming approach by leveraging antd's built-in App context 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Use render_app_template() in EmbeddedView to provide proper template context - Move tokens variable definition before its usage in spa.html template - Fixes 'tokens is undefined' error in embedded dashboard views 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Fixes white flash in dark mode and removes fallback "Loading..." text that was displaying in Times New Roman font. Changes: - Set themed background color on body using colorBgBase token - Supports both light (#ffffff) and dark mode backgrounds - Remove "Loading..." alt text from branded spinner image - Remove fallback "Loading..." text div entirely - Let React app handle loading state instead of HTML fallback This eliminates the white background flash when loading in dark mode and removes the unstyled "Loading..." text that appeared briefly. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
![korbit-ai[bot]](https://avatars.githubusercontent.com/in/322216?s=60&v=4){kind=small}
dosubot
bot
added
change:frontend
eschutho
added
the
🎪 ⚡ showtime-trigger-start
github-actions
bot
added
🎪 6f6d925 🚦 building
github-actions
bot
added
🎪 6f6d925 🚦 deploying
|
🎪 Showtime deployed environment on GHA for 6f6d925 • Environment: http://44.251.170.59:8080 (admin/admin) |
Added dark mode styling and improved loading indicators.
Removed fallback loading message from spa.html.
…#35130) Co-authored-by: Claude <[email protected]>
yousoph
added
the
🎪 ⚡ showtime-trigger-start
github-actions
bot
added
🎪 7e44735 🚦 building
github-actions
bot
added
🎪 7e44735 🤡 yousoph
|
🎪 Showtime deployed environment on GHA for 7e44735 • Environment: http://35.87.124.232:8080 (admin/admin) |
github-actions
bot
removed
🎪 7e44735 ⌛ 48h
msyavuz
requested changes
Sep 25, 2025
Comment on lines
376
to
377
| error: AntdModal.error, | ||
| warning: AntdModal.warning, |
There was a problem hiding this comment.
Should these two use the themed version as well?
| <GlobalStyles /> | ||
| <ConfigProvider theme={themeState.antdConfig}> | ||
| {children} | ||
| <App>{children}</App> |
There was a problem hiding this comment.
This provides some reset styles that could mess up other parts of the ui.
Comment on lines
+320
to
+333
| // When sortMetric is specified, the backend already sorted the data correctly | ||
| // Don't override the backend's metric-based sorting with frontend alphabetical sorting | ||
| if (formData.sortMetric) { | ||
| return 0; // Preserve the original order from the backend | ||
| } | ||
|
|
||
| // Only apply alphabetical sorting when no sortMetric is specified | ||
| const labelComparator = propertyComparator('label'); | ||
| if (formData.sortAscending) { | ||
| return labelComparator(a, b); | ||
| } | ||
| return labelComparator(b, a); | ||
| }, | ||
| [formData.sortAscending], | ||
| [formData.sortAscending, formData.sortMetric], |
There was a problem hiding this comment.
This looks like leftover code from another pr
Comment on lines
-92
to
-94
| bootstrap_data=json.dumps( | ||
| bootstrap_data, default=json.pessimistic_json_iso_dttm_ser | ||
| ), |
There was a problem hiding this comment.
Getting rid of this will make it so there will be errors when the serialization fails
|
I think Claude did a bad rebase.. will clean up. |
Add aria-label to loading spinner image for screen reader accessibility while keeping empty alt text to prevent fallback display if image fails to load. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
eschutho
force-pushed
the
fix/loading-screen-dark-mode-theming
branch
from
1a22cf8 to
3732966
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
SUMMARY
This PR improves the loading screen experience for users with dark mode preferences and enhances accessibility.
Changes:
@media (prefers-color-scheme: dark))aria-label="Loading"instead ofalttext for spinner imagesThe changes provide a better initial loading experience that respects user's system theme preferences before the main application loads and eliminates jarring white flashes in dark mode.
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Screen.Recording.2025-09-15.at.1.43.15.PM.mov
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION
🤖 Generated with Claude Code