Restore previous swirl animation for image generation loader

static/index.html

@@ -424,71 +424,213 @@
         }
 
         .image-container.loading {
-            min-height: 280px;
-            min-width: 280px;
-            background: #000;
+            min-height: 320px;
+            min-width: 320px;
+            background: #020205;
             display: flex;
             align-items: center;
             justify-content: center;
             position: relative;
             overflow: hidden;
+            border-radius: 12px;
         }
 
-        /* Movie-like Rotating Gradient */
-        .image-container.loading::before {
-            content: '';
+        .image-container.loading .blob {
             position: absolute;
-            inset: -50%;
-            background: conic-gradient(from 0deg,
-                    transparent 0deg,
-                    #00d4aa 60deg,
-                    #00bcd4 120deg,
-                    #2d8cbe 180deg,
-                    transparent 240deg);
-            animation: rotate-gradient 4s linear infinite;
-            opacity: 0.8;
-        }
-
-        /* Dark overlay to make text readable */
-        .image-container.loading::after {
-            content: 'Creating image...';
+            width: 200%;
+            height: 200%;
+            border-radius: 50%;
+            filter: blur(80px);
+            mix-blend-mode: screen;
+            opacity: 0.65;
+            will-change: transform;
+        }
+
+        .image-container.loading .blob-1 {
+            background: radial-gradient(circle at center, #00ffff 0%, transparent 70%);
+            top: -50%;
+            left: -50%;
+            animation: move-cyan 12s infinite alternate ease-in-out;
+        }
+
+        .image-container.loading .blob-2 {
+            background: radial-gradient(circle at center, #2b00ff 0%, transparent 70%);
+            bottom: -50%;
+            right: -50%;
+            animation: move-blue 15s infinite alternate ease-in-out;
+        }
+
+        .image-container.loading .blob-3 {
+            background: radial-gradient(circle at center, #0066ff 0%, transparent 70%);
+            top: 0;
+            left: 0;
+            animation: move-mid 10s infinite alternate ease-in-out;
+        }
+
+        .image-container.loading .blob-4 {
+            background: radial-gradient(circle at center, #00ffd5 0%, transparent 70%);
+            bottom: 0;
+            left: 0;
+            animation: move-teal 15s infinite alternate ease-in-out;
+        }
+
+        @keyframes move-cyan {
+            0% {
+                transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
+            }
+
+            50% {
+                transform: translate3d(40%, 25%, 0) scale(1.4) rotate(90deg);
+            }
+
+            100% {
+                transform: translate3d(5%, 10%, 0) scale(1) rotate(-45deg);
+            }
+        }
+
+        @keyframes move-blue {
+            0% {
+                transform: translate3d(0, 0, 0) scale(1.3) rotate(0deg);
+            }
+
+            50% {
+                transform: translate3d(-50%, -35%, 0) scale(0.9) rotate(-120deg);
+            }
+
+            100% {
+                transform: translate3d(-15%, 20%, 0) scale(1.3) rotate(30deg);
+            }
+        }
+
+        @keyframes move-mid {
+            0% {
+                transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
+            }
+
+            50% {
+                transform: translate3d(35%, 35%, 0) rotate(180deg) scale(1.5);
+            }
+
+            100% {
+                transform: translate3d(-15%, -25%, 0) rotate(360deg) scale(0.9);
+            }
+        }
+
+        @keyframes move-teal {
+            0% {
+                transform: translate3d(0, 0, 0) scale(0.9);
+            }
+
+            50% {
+                transform: translate3d(40%, -50%, 0) scale(1.6);
+            }
+
+            100% {
+                transform: translate3d(10%, 10%, 0) scale(0.9);
+            }
+        }
+
+        .loading-text-container {
             position: absolute;
-            inset: 4px;
-            background: #1a1a2e;
             display: flex;
             align-items: center;
             justify-content: center;
-            color: rgba(255, 255, 255, 0.9);
-            font-size: 14px;
-            font-weight: 500;
-            border-radius: 8px;
-            animation: pulse-text 2s infinite ease-in-out;
+            z-index: 10;
+            font-size: clamp(14px, 4vw, 18px);
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.02em;
+        }
+
+        .loading-text-container .char {
+            display: inline-block;
+            color: white;
+            opacity: 0;
+            animation: glitchReveal 0.4s steps(2, start) forwards;
+        }
+
+        .loading-text-container .space {
+            width: 0.4em;
         }
 
-        @keyframes rotate-gradient {
+        @keyframes glitchReveal {
             0% {
-                transform: rotate(0deg);
+                opacity: 0;
+                transform: translateX(-2px);
+                filter: brightness(2);
+            }
+
+            20% {
+                opacity: 0.5;
+                transform: translateX(2px);
+            }
+
+            40% {
+                opacity: 0;
+                transform: translateX(-1px);
+            }
+
+            60% {
+                opacity: 0.8;
+                transform: translateX(1px);
+            }
+
+            80% {
+                opacity: 0.3;
+                transform: translateX(-2px);
             }
 
             100% {
-                transform: rotate(360deg);
+                opacity: 1;
+                transform: translateX(0);
+                filter: brightness(1);
+                text-shadow: 0 0 15px #00ffff;
             }
         }
 
-        @keyframes pulse-text {
+        .loading-text-container .char-loop {
+            animation: subtleGlow 4s infinite ease-in-out;
+        }
+
+        @keyframes subtleGlow {
 
             0%,
             100% {
-                color: rgba(255, 255, 255, 0.7);
-                transform: scale(0.98);
+                opacity: 1;
+                text-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
+                transform: scale(1);
             }
 
             50% {
-                color: rgba(255, 255, 255, 1);
-                transform: scale(1);
+                opacity: 0.7;
+                text-shadow: 0 0 5px rgba(0, 255, 255, 0.1);
+                transform: scale(0.98);
             }
         }
 
+        .image-container.loading .vignette {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at center, transparent 10%, rgba(0, 0, 0, 0.5) 100%);
+            z-index: 4;
+            pointer-events: none;
+        }
+
+        .image-container.loading .noise {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0.05;
+            pointer-events: none;
+            z-index: 5;
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+        }
+
         .image-actions {
             position: absolute;
             bottom: 8px;
@@ -1532,18 +1674,47 @@
             const chatContainer = document.getElementById('chatContainer');
             const messagesContainer = document.getElementById('chatMessages');
 
-            // Create loading message
+            // Create loading message with mesh gradient animation
             const div = document.createElement('div');
             div.className = 'message assistant';
             div.innerHTML = `
                 <div class="message-wrapper">
                     <div class="message-content">
                         <p>Generating image: "${prompt}"</p>
-                        <div class="image-container loading"></div>
+                        <div class="image-container loading">
+                            <div class="blob blob-1"></div>
+                            <div class="blob blob-2"></div>
+                            <div class="blob blob-3"></div>
+                            <div class="blob blob-4"></div>
+                            <div class="vignette"></div>
+                            <div class="noise"></div>
+                            <div class="loading-text-container" id="loadingText-${Date.now()}"></div>
+                        </div>
                     </div>
                 </div>
             `;
             messagesContainer.appendChild(div);
+
+            // Animate loading text with glitch entry and glow loop
+            const textContainer = div.querySelector('.loading-text-container');
+            const text = 'CREATING IMAGE';
+            [...text].forEach((char, i) => {
+                const span = document.createElement('span');
+                if (char === ' ') {
+                    span.className = 'space';
+                } else {
+                    span.className = 'char';
+                    span.innerText = char;
+                    span.style.setProperty('--i', i);
+                    span.style.animationDelay = `${i * 0.05}s`;
+                    span.addEventListener('animationend', (e) => {
+                        if (e.animationName === 'glitchReveal') {
+                            span.classList.add('char-loop');
+                        }
+                    });
+                }
+                textContainer.appendChild(span);
+            });
             chatContainer.scrollTop = chatContainer.scrollHeight;
 
             // Create Pollinations URL