Add ladybug loading screen

src/webui/interface.py

@@ -35,6 +35,69 @@ def create_ui(theme_name="Hacker"):
     hacker_theme, hacker_css = get_hacker_theme()
     
     css = hacker_css + """
+    /* Custom Page Loading Screen */
+    #loading-screen {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #0a0e27 0%, #1a0e3a 100%);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+        transition: opacity 0.5s ease-out;
+    }
+    
+    #loading-screen.hidden {
+        opacity: 0;
+        pointer-events: none;
+    }
+    
+    .ladybug-loader {
+        font-size: 100px;
+        animation: ladybug-bounce 1.5s ease-in-out infinite;
+        filter: drop-shadow(0 0 20px #ff0088);
+    }
+    
+    @keyframes ladybug-bounce {
+        0%, 100% { 
+            transform: translateY(0) rotate(0deg);
+        }
+        25% { 
+            transform: translateY(-30px) rotate(-15deg);
+        }
+        50% { 
+            transform: translateY(0) rotate(0deg);
+        }
+        75% { 
+            transform: translateY(-15px) rotate(15deg);
+        }
+    }
+    
+    .loading-text {
+        margin-top: 30px;
+        color: #00ff88;
+        font-family: 'Fira Code', monospace;
+        font-size: 24px;
+        letter-spacing: 4px;
+        text-shadow: 0 0 10px #00ff88;
+        animation: pulse-glow 2s ease-in-out infinite;
+    }
+    
+    @keyframes pulse-glow {
+        0%, 100% { 
+            opacity: 0.6;
+            text-shadow: 0 0 10px #00ff88;
+        }
+        50% { 
+            opacity: 1;
+            text-shadow: 0 0 20px #00ff88, 0 0 30px #00ff88;
+        }
+    }
+    
     .gradio-container {
         width: 85vw !important; 
         max-width: 85% !important; 
@@ -116,7 +179,7 @@ def create_ui(theme_name="Hacker"):
     }
     """
 
-    # dark mode in default
+    # dark mode in default + loading screen
     js_func = """
     function refresh() {
         const url = new URL(window.location);
@@ -125,6 +188,19 @@ def create_ui(theme_name="Hacker"):
             url.searchParams.set('__theme', 'dark');
             window.location.href = url.href;
         }
+        
+        // Hide loading screen after page loads
+        window.addEventListener('load', function() {
+            setTimeout(function() {
+                const loadingScreen = document.getElementById('loading-screen');
+                if (loadingScreen) {
+                    loadingScreen.classList.add('hidden');
+                    setTimeout(function() {
+                        loadingScreen.remove();
+                    }, 500);
+                }
+            }, 1000);
+        });
     }
     """
 
@@ -137,6 +213,14 @@ def create_ui(theme_name="Hacker"):
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             """,
     ) as demo:
+        # Loading Screen
+        gr.HTML("""
+            <div id="loading-screen">
+                <div class="ladybug-loader">🐞</div>
+                <div class="loading-text">INITIALIZING BUG MATRIX...</div>
+            </div>
+        """)
+        
         with gr.Row():
             gr.HTML(
                 """