Add theme loading styles and improve theme management

Updated `theme-toggle.css` with new styles for DeepSea and Bitcoin themes, including a loading screen. Introduced `isApplyingTheme` flag in `main.js` to manage theme application state. Modified `applyDeepSeaTheme` and `toggleTheme` functions in `theme.js` to enhance theme switching experience with dynamic loading messages. Enhanced `base.html` to preload styles and prevent flickering during theme transitions.

static/css/theme-toggle.css

@@ -141,3 +141,69 @@ body.deepsea-theme #themeToggle:focus,
 body.deepsea-theme .theme-toggle-btn:focus {
     box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.3);
 }
+
+/* Add to your common.css or theme-toggle.css */
+html.deepsea-theme {
+    --primary-color: #0088cc;
+}
+
+html.bitcoin-theme {
+    --primary-color: #f2a900;
+}
+
+/* Add these theme-specific loading styles */
+#theme-loader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    font-family: 'VT323', monospace;
+}
+
+html.bitcoin-theme #theme-loader {
+    background-color: #111111;
+    color: #f2a900;
+}
+
+html.deepsea-theme #theme-loader {
+    background-color: #0c141a;
+    color: #0088cc;
+}
+
+#loader-icon {
+    font-size: 48px;
+    margin-bottom: 20px;
+    animation: spin 2s infinite linear;
+}
+
+#loader-text {
+    font-size: 24px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 0.8;
+    }
+
+    50% {
+        opacity: 1;
+    }
+}

static/js/main.js

@@ -1,7 +1,4 @@
-// Add this flag at the top of your file, outside the function
-let isApplyingTheme = false;
-
-"use strict";
+"use strict";
 
 /**
  * ArrowIndicator - A clean implementation for managing metric value change indicators

static/js/theme.js

@@ -1,3 +1,6 @@
+// Add this flag at the top of your file, outside the function
+let isApplyingTheme = false;
+
 // Bitcoin Orange theme (default)
 const BITCOIN_THEME = {
     PRIMARY: '#f2a900',
@@ -59,7 +62,7 @@ function applyDeepSeaTheme() {
     }
 
     // Set the guard flag
-    window.themeProcessing = true;
+    isApplyingTheme = true;
 
     try {
         console.log("Applying DeepSea theme...");
@@ -340,8 +343,8 @@ function applyDeepSeaTheme() {
 
         console.log("DeepSea theme applied with color adjustments");
     } finally {
-        // Always reset the guard flag when done, even if there's an error
-        window.themeProcessing = false;
+        // Reset the guard flag when done, even if there's an error
+        setTimeout(() => { isApplyingTheme = false; }, 100);
     }
 }
 
@@ -355,29 +358,43 @@ function toggleTheme() {
     // Save the new theme preference
     saveThemePreference(useDeepSea);
 
-    // Show a brief loading message to indicate theme change is happening
+    // Show a themed loading message
     const loadingMessage = document.createElement('div');
+    loadingMessage.id = 'theme-loader';
+
+    const icon = document.createElement('div');
+    icon.id = 'loader-icon';
+    icon.innerHTML = useDeepSea ? '🌊' : '₿';
+
+    const text = document.createElement('div');
+    text.id = 'loader-text';
+    text.textContent = 'Applying ' + (useDeepSea ? 'DeepSea' : 'Bitcoin') + ' Theme';
+
+    loadingMessage.appendChild(icon);
+    loadingMessage.appendChild(text);
+
+    // Apply immediate styling
     loadingMessage.style.position = 'fixed';
     loadingMessage.style.top = '0';
     loadingMessage.style.left = '0';
     loadingMessage.style.width = '100%';
     loadingMessage.style.height = '100%';
-    loadingMessage.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+    loadingMessage.style.backgroundColor = useDeepSea ? '#0c141a' : '#111111';
+    loadingMessage.style.color = useDeepSea ? '#0088cc' : '#f2a900';
     loadingMessage.style.display = 'flex';
+    loadingMessage.style.flexDirection = 'column';
     loadingMessage.style.justifyContent = 'center';
     loadingMessage.style.alignItems = 'center';
     loadingMessage.style.zIndex = '9999';
-    loadingMessage.style.color = useDeepSea ? '#0088cc' : '#f2a900';
     loadingMessage.style.fontFamily = "'VT323', monospace";
-    loadingMessage.style.fontSize = '24px';
-    loadingMessage.innerHTML = '<div style="background-color: rgba(0, 0, 0, 0.8); padding: 20px; border-radius: 5px;">APPLYING ' + (useDeepSea ? 'DEEPSEA' : 'BITCOIN') + ' THEME...</div>';
+
     document.body.appendChild(loadingMessage);
 
-    // Short delay before refreshing to allow the message to be seen
+    // Short delay before refreshing
     setTimeout(() => {
         // Hard reload the page
         window.location.reload();
-    }, 300);
+    }, 500);
 }
 
 // Set theme preference to localStorage

templates/base.html

@@ -36,6 +36,112 @@
             border-top: 1px solid rgba(128, 128, 128, 0.2);
         }
     </style>
+    <!-- Preload theme to prevent flicker -->
+    <style id="theme-preload">
+        /* Theme-aware loading state */
+        html.bitcoin-theme {
+            background-color: #111111;
+        }
+
+        html.deepsea-theme {
+            background-color: #0c141a;
+        }
+
+        #theme-loader {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 9999;
+            font-family: 'VT323', monospace;
+        }
+
+        html.bitcoin-theme #theme-loader {
+            background-color: #111111;
+            color: #f2a900;
+        }
+
+        html.deepsea-theme #theme-loader {
+            background-color: #0c141a;
+            color: #0088cc;
+        }
+
+        #loader-icon {
+            font-size: 48px;
+            margin-bottom: 20px;
+            animation: spin 2s infinite linear;
+        }
+
+        #loader-text {
+            font-size: 24px;
+            text-transform: uppercase;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        /* Hide content during load */
+        body {
+            visibility: hidden;
+        }
+    </style>
+    <script>
+        // Execute this immediately to preload theme
+        (function () {
+            const useDeepSea = localStorage.getItem('useDeepSeaTheme') === 'true';
+            const themeClass = useDeepSea ? 'deepsea-theme' : 'bitcoin-theme';
+
+            // Apply theme class to html element
+            document.documentElement.classList.add(themeClass);
+
+            // Create and add loader
+            document.addEventListener('DOMContentLoaded', function () {
+                // Create loader element
+                const loader = document.createElement('div');
+                loader.id = 'theme-loader';
+
+                const icon = document.createElement('div');
+                icon.id = 'loader-icon';
+                icon.innerHTML = useDeepSea ? '🌊' : '₿';
+
+                const text = document.createElement('div');
+                text.id = 'loader-text';
+                text.textContent = 'Loading ' + (useDeepSea ? 'DeepSea' : 'Bitcoin') + ' Theme';
+
+                loader.appendChild(icon);
+                loader.appendChild(text);
+                document.body.appendChild(loader);
+
+                // Add fade-in effect for content once theme is loaded
+                setTimeout(function () {
+                    document.body.style.visibility = 'visible';
+
+                    // Fade out loader
+                    loader.style.transition = 'opacity 0.5s ease';
+                    loader.style.opacity = '0';
+
+                    // Remove loader after fade
+                    setTimeout(function () {
+                        if (loader && loader.parentNode) {
+                            loader.parentNode.removeChild(loader);
+                        }
+                    }, 500);
+                }, 300);
+            });
+        })();
+    </script>
 </head>
 <body>
     <div class="container-fluid">