fix(loading): improve loading screen theming for dark mode support by eschutho · Pull Request #35129 · apache/superset

eschutho · 2025-09-13T01:57:49Z

SUMMARY

This PR improves the loading screen experience for users with dark mode preferences and enhances accessibility.

Changes:

Added CSS styles to support system dark mode preference (@media (prefers-color-scheme: dark))
Improved accessibility by using aria-label="Loading" instead of alt text for spinner images
Ensures loading indicators work properly in both light and dark themes

The 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

Set your system to dark mode preference
Load a Superset page and observe the loading screen
Verify the loading screen background/text matches your system theme
Test with screen reader to confirm "Loading" is announced properly
Verify no white flash occurs during page load in dark mode

ADDITIONAL INFORMATION

Changes UI

🤖 Generated with Claude Code

korbit-ai

I've completed my review and didn't find any issues.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

github-actions · 2025-09-13T02:53:08Z

🎪 Showtime is building environment on GHA for 6f6d925

github-actions · 2025-09-13T03:03:28Z

🎪 Showtime deployed environment on GHA for 6f6d925

• Environment: http://44.251.170.59:8080 (admin/admin)
• Lifetime: 24h auto-cleanup
• Updates: New commits create fresh environments automatically

github-actions · 2025-09-13T21:06:09Z

🎪 Showtime is building environment on GHA for 39d832c

github-actions · 2025-09-18T23:55:33Z

🎪 Showtime deployed environment on GHA for 7e44735

• Environment: http://35.87.124.232:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

msyavuz

I think there is some cleanup needed

msyavuz · 2025-09-25T11:11:07Z

  error: AntdModal.error,
  warning: AntdModal.warning,


Should these two use the themed version as well?

msyavuz · 2025-09-25T11:17:09Z

          <GlobalStyles />
          <ConfigProvider theme={themeState.antdConfig}>
-            {children}
+            <App>{children}</App>


This provides some reset styles that could mess up other parts of the ui.

msyavuz · 2025-09-25T11:18:03Z

+      // 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],


This looks like leftover code from another pr

msyavuz · 2025-09-25T11:24:40Z

-            bootstrap_data=json.dumps(
-                bootstrap_data, default=json.pessimistic_json_iso_dttm_ser
-            ),


Getting rid of this will make it so there will be errors when the serialization fails

eschutho · 2025-09-25T17:05:07Z

I think Claude did a bad rebase.. will clean up.

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 <noreply@anthropic.com>

Added dark mode styling and improved loading indicators.

Removed fallback loading message from spa.html.

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 <noreply@anthropic.com>

github-actions · 2025-10-02T20:19:50Z

🎪 Showtime is building environment on GHA for 951b48d

github-actions · 2025-10-02T20:30:40Z

🎪 Showtime deployed environment on GHA for 951b48d

• Environment: http://44.249.56.21:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

eschutho · 2025-10-03T17:04:00Z

@msyavuz this is ready for review now. Thanks!

korbit-ai

I've completed my review and didn't find any issues.

Files scanned

File Path	Reviewed
superset/templates/superset/spa.html	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

msyavuz

LGTM!

Remove trailing whitespace from the style block to comply with pre-commit hooks. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2025-10-03T22:32:37Z

🎪 Showtime is building environment on GHA for 1faaa21

github-actions · 2025-10-03T22:46:02Z

🎪 Showtime deployed environment on GHA for 1faaa21

• Environment: http://44.243.219.226:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

Replace `waitFor` with `getByText` pattern with `findByText` which automatically waits for the element to appear. This follows React Testing Library best practices and eliminates flaky test failures caused by timing issues with fake/real timers. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2025-10-03T23:32:39Z

🎪 Showtime is building environment on GHA for 032abe7

github-actions · 2025-10-03T23:46:04Z

🎪 Showtime deployed environment on GHA for 032abe7

• Environment: http://35.90.97.68:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

eschutho · 2025-10-03T23:51:27Z

+  expect(
+    await screen.findByText(PRE_FILTER_REQUIRED_REGEX),
+  ).toBeInTheDocument();
 }, 50000); // Slow-running test, increase timeout to 50 seconds.


fix for a flaky test

pull-request-size Bot added the size/S label Sep 13, 2025

korbit-ai Bot reviewed Sep 13, 2025

View reviewed changes

dosubot Bot added change:frontend Requires changing the frontend global:theming Related to theming Superset labels Sep 13, 2025

eschutho added the 🎪 ⚡ showtime-trigger-start Create new ephemeral environment for this PR label Sep 13, 2025

github-actions Bot added 🎪 6f6d925 🚦 building and removed 🎪 ⚡ showtime-trigger-start Create new ephemeral environment for this PR labels Sep 13, 2025

github-actions Bot added 🎪 6f6d925 🚦 deploying and removed 🎪 6f6d925 🚦 building labels Sep 13, 2025

eschutho marked this pull request as draft September 13, 2025 03:32

github-actions Bot added the 🎪 🔒 showtime-blocked label Sep 13, 2025

eschutho removed the 🎪 🔒 showtime-blocked label Sep 13, 2025

github-actions Bot added 🎪 39d832c 🚦 building labels Sep 13, 2025

github-actions Bot added 🎪 39d832c 🤡 eschutho 🎪 🔒 showtime-blocked labels Sep 13, 2025

github-actions Bot added 🎪 7e44735 🌐 35.87.124.232:8080 and removed 🎪 7e44735 🚦 running labels Sep 18, 2025

github-actions Bot removed 🎪 7e44735 ⌛ 48h labels Sep 21, 2025

eschutho changed the base branch from 6.0-bug-fixes to master September 24, 2025 22:00

pull-request-size Bot removed the size/S label Sep 24, 2025

msyavuz requested changes Sep 25, 2025

View reviewed changes

eschutho and others added 4 commits October 2, 2025 09:27

Implement dark mode and update loading indicators

90bebef

Added dark mode styling and improved loading indicators.

Remove fallback loading message in spa.html

86a19a7

Removed fallback loading message from spa.html.

korbit-ai Bot suggested changes Oct 3, 2025

View reviewed changes

msyavuz approved these changes Oct 3, 2025

View reviewed changes

fix(spa): remove trailing whitespace in spa.html

1faaa21

Remove trailing whitespace from the style block to comply with pre-commit hooks. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

eschutho commented Oct 3, 2025

View reviewed changes

Conversation

eschutho commented Sep 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

korbit-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Sep 13, 2025

Uh oh!

github-actions Bot commented Sep 13, 2025

Uh oh!

github-actions Bot commented Sep 13, 2025

Uh oh!

github-actions Bot commented Sep 18, 2025

Uh oh!

msyavuz left a comment

Choose a reason for hiding this comment

Uh oh!

msyavuz Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

msyavuz Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

msyavuz Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

msyavuz Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

eschutho commented Sep 25, 2025

Uh oh!

github-actions Bot commented Oct 2, 2025

Uh oh!

github-actions Bot commented Oct 2, 2025

Uh oh!

eschutho commented Oct 3, 2025

Uh oh!

korbit-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

msyavuz left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Oct 3, 2025

Uh oh!

github-actions Bot commented Oct 3, 2025

Uh oh!

github-actions Bot commented Oct 3, 2025

Uh oh!

github-actions Bot commented Oct 3, 2025

Uh oh!

eschutho Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

eschutho commented Sep 13, 2025 •

edited

Loading