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

eschutho · claude · eschutho · commit 6f6d92558e33 · 2025-09-12T18:57:18.000-07:00
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>
diff --git a/superset/templates/superset/spa.html b/superset/templates/superset/spa.html
@@ -69,11 +69,11 @@
     {% endblock %}
   </head>
 
-  <body {% if standalone_mode %}class="standalone"{% endif %}>
+  {% set tokens = theme_tokens | default({}) %}
+  <body {% if standalone_mode %}class="standalone"{% endif %} style="margin: 0; padding: 0; background-color: {{ tokens.get('colorBgBase', '#ffffff') }};">
 
     {% block body %}
       <div id="app" data-bootstrap="{{ bootstrap_data }}">
-        {% set tokens = theme_tokens | default({}) %}
         {% set spinner_style = "width: 70px; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" %}
 
         {% if spinner_svg %}
@@ -85,14 +85,10 @@
           <!-- Custom URL from theme -->
           <img
             src="{{ tokens.brandSpinnerUrl }}"
-            alt="Loading..."
+            alt=""
             style="{{ spinner_style }}"
           />
-        {% else %}
-          <!-- Fallback: This should rarely happen with new logic -->
-          <div style="{{ spinner_style }}">
-            Loading...
-          </div>
+        {# Remove fallback text - let React app handle loading state #}
         {% endif %}
       </div>
     {% endblock %}
