Enhanced loading: 2 ladybugs + extra text + animated dots

src/webui/interface.py

@@ -87,6 +87,53 @@ def create_ui(theme_name="Hacker"):
         animation: pulse-glow 2s ease-in-out infinite;
     }
     
+    .loading-subtext {
+        margin-top: 15px;
+        color: #00ffff;
+        font-family: 'Fira Code', monospace;
+        font-size: 16px;
+        letter-spacing: 2px;
+        text-shadow: 0 0 8px #00ffff;
+        opacity: 0.8;
+    }
+    
+    .loading-dots {
+        margin-top: 10px;
+        display: flex;
+        gap: 5px;
+        justify-content: center;
+    }
+    
+    .loading-dots span {
+        color: #ff00ff;
+        font-size: 30px;
+        animation: dot-bounce 1.4s ease-in-out infinite;
+        text-shadow: 0 0 10px #ff00ff;
+    }
+    
+    .loading-dots span:nth-child(1) {
+        animation-delay: 0s;
+    }
+    
+    .loading-dots span:nth-child(2) {
+        animation-delay: 0.2s;
+    }
+    
+    .loading-dots span:nth-child(3) {
+        animation-delay: 0.4s;
+    }
+    
+    @keyframes dot-bounce {
+        0%, 80%, 100% {
+            transform: translateY(0);
+            opacity: 0.5;
+        }
+        40% {
+            transform: translateY(-20px);
+            opacity: 1;
+        }
+    }
+    
     @keyframes pulse-glow {
         0%, 100% { 
             opacity: 0.6;
@@ -216,8 +263,15 @@ def create_ui(theme_name="Hacker"):
         # Loading Screen
         gr.HTML("""
             <div id="loading-screen">
-                <div class="ladybug-loader">🐞</div>
-                <div class="loading-text">INITIALIZING BUG MATRIX...</div>
+                <div style="display: flex; gap: 40px; align-items: center; justify-content: center;">
+                    <div class="ladybug-loader" style="animation-delay: 0s;">🐞</div>
+                    <div class="ladybug-loader" style="animation-delay: 0.3s;">🐞</div>
+                </div>
+                <div class="loading-text" style="margin-top: 40px;">INITIALIZING BUG MATRIX...</div>
+                <div class="loading-subtext">Loading Testing Environment</div>
+                <div class="loading-dots">
+                    <span>.</span><span>.</span><span>.</span>
+                </div>
             </div>
         """)