Add ladybug loading animation

src/webui/hacker_theme.py

@@ -284,16 +284,76 @@ label {
     background: rgba(255, 0, 136, 0.1) !important;
 }
 
-/* Loading spinner */
-.loading {
-    border: 3px solid rgba(0, 255, 255, 0.3) !important;
-    border-top: 3px solid #00ffff !important;
-    animation: spin 1s linear infinite !important;
+/* Ladybug Loading Animation */
+.loading, .loader, [class*="loading"], .wrap.svelte-1cl284s {
+    position: relative !important;
+    width: 80px !important;
+    height: 80px !important;
+    border: none !important;
+    background: transparent !important;
+}
+
+.loading::before, .loader::before, [class*="loading"]::before {
+    content: "🐞" !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    font-size: 60px !important;
+    animation: ladybug-crawl 2s ease-in-out infinite !important;
+    filter: drop-shadow(0 0 10px #ff0088) !important;
+}
+
+.loading::after, .loader::after, [class*="loading"]::after {
+    content: "Loading..." !important;
+    position: absolute !important;
+    bottom: -30px !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+    color: #00ff88 !important;
+    font-family: 'Fira Code', monospace !important;
+    font-size: 12px !important;
+    letter-spacing: 2px !important;
+    text-shadow: 0 0 5px #00ff88 !important;
+    animation: pulse-text 1.5s ease-in-out infinite !important;
+}
+
+@keyframes ladybug-crawl {
+    0%, 100% { 
+        transform: translate(-50%, -50%) rotate(0deg) scale(1);
+    }
+    25% { 
+        transform: translate(-50%, -50%) rotate(-10deg) scale(1.1);
+    }
+    50% { 
+        transform: translate(-50%, -50%) rotate(0deg) scale(1);
+    }
+    75% { 
+        transform: translate(-50%, -50%) rotate(10deg) scale(1.1);
+    }
+}
+
+@keyframes pulse-text {
+    0%, 100% { 
+        opacity: 0.6;
+        text-shadow: 0 0 5px #00ff88;
+    }
+    50% { 
+        opacity: 1;
+        text-shadow: 0 0 15px #00ff88, 0 0 25px #00ff88;
+    }
+}
+
+/* Gradio specific loading indicators */
+.pending, .generating {
+    position: relative !important;
 }
 
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+.pending::before, .generating::before {
+    content: "🐞" !important;
+    font-size: 40px !important;
+    animation: ladybug-crawl 2s ease-in-out infinite !important;
+    filter: drop-shadow(0 0 10px #ff0088) !important;
 }
 
 /* Dropdown menus */