Add loading screen during AI initialization

- Beautiful loading screen with animated avatar and progress bar
- Polls /status endpoint every 2 seconds until initialization complete
- Shows initialization progress and status messages
- Smooth fade-out animation when AI is ready
- Chat interface hidden until Gemini API is fully initialized
- Prevents user frustration from trying to chat before AI is ready

The loading screen includes:
- Floating avatar animation
- Spinning loader
- Animated progress bar
- Real-time status messages
- Gradient purple background matching brand colors

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

static/css/style.css

@@ -395,3 +395,100 @@ body {
 .sentiment-angry {
     animation: angryPulse 0.5s infinite;
 }
+
+/* Loading Screen Styles */
+.loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    animation: fadeIn 0.5s ease-in-out;
+}
+
+.loading-content {
+    text-align: center;
+    color: white;
+}
+
+.loading-avatar {
+    margin-bottom: 30px;
+    animation: float 3s ease-in-out infinite;
+}
+
+.loading-avatar .avatar {
+    width: 120px;
+    height: 120px;
+    margin: 0 auto;
+}
+
+.loading-content h2 {
+    font-size: 28px;
+    font-weight: 600;
+    margin-bottom: 20px;
+}
+
+.loading-spinner {
+    width: 50px;
+    height: 50px;
+    margin: 20px auto;
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+#loading-status {
+    font-size: 16px;
+    opacity: 0.9;
+    margin-top: 20px;
+    min-height: 24px;
+}
+
+.loading-bar {
+    width: 300px;
+    height: 8px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 10px;
+    margin: 20px auto 0;
+    overflow: hidden;
+}
+
+.loading-progress {
+    height: 100%;
+    background: white;
+    border-radius: 10px;
+    width: 0%;
+    transition: width 0.5s ease;
+    animation: loadingPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+}
+
+@keyframes loadingPulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+.loading-screen.fade-out {
+    animation: fadeOut 0.5s ease-in-out forwards;
+}
+
+@keyframes fadeOut {
+    to {
+        opacity: 0;
+        visibility: hidden;
+    }
+}

static/js/script.js

@@ -179,33 +179,67 @@ document.addEventListener('DOMContentLoaded', function() {
         curiosityBar.style.width = `${emotions.curiosity * 100}%`;
     }
     
-    // Add initialization status check
+    // Add initialization status check with loading screen
+    let initCheckCount = 0;
     function checkInitializationStatus() {
-        const statusContainer = document.getElementById('status-container');
-        
+        const loadingScreen = document.getElementById('loading-screen');
+        const chatContainer = document.getElementById('chat-container');
+        const loadingStatus = document.getElementById('loading-status');
+        const loadingProgress = document.getElementById('loading-progress');
+
+        initCheckCount++;
+        const progress = Math.min(initCheckCount * 10, 90); // Cap at 90% until actually ready
+        if (loadingProgress) {
+            loadingProgress.style.width = `${progress}%`;
+        }
+
         fetch('/status')
             .then(response => response.json())
             .then(data => {
                 if (data.initializing) {
                     // Still initializing
-                    showStatusMessage('Galatea AI is still initializing. You can start chatting, but responses may be delayed.', false);
-                    setTimeout(checkInitializationStatus, 3000); // Check again in 3 seconds
+                    if (loadingStatus) {
+                        loadingStatus.textContent = 'Initializing AI components...';
+                    }
+                    setTimeout(checkInitializationStatus, 2000); // Check again in 2 seconds
                 } else if (data.is_initialized) {
-                    // Initialization complete
-                    showStatusMessage('Galatea AI is ready!', false);
-                    // Start polling for avatar updates when initialized
-                    startAvatarPolling();
+                    // Initialization complete!
+                    if (loadingProgress) {
+                        loadingProgress.style.width = '100%';
+                    }
+                    if (loadingStatus) {
+                        loadingStatus.textContent = 'Ready! Welcome to Galatea AI';
+                    }
+
+                    // Hide loading screen and show chat after a brief delay
                     setTimeout(() => {
-                        statusContainer.style.display = 'none';
-                    }, 3000);
+                        if (loadingScreen) {
+                            loadingScreen.classList.add('fade-out');
+                            setTimeout(() => {
+                                loadingScreen.style.display = 'none';
+                                if (chatContainer) {
+                                    chatContainer.style.display = 'flex';
+                                }
+                            }, 500);
+                        }
+
+                        // Start polling for avatar updates when initialized
+                        startAvatarPolling();
+                    }, 1000);
                 } else {
                     // Something wrong with initialization
-                    showStatusMessage('Galatea initialization is taking longer than expected. You can still chat, but with limited functionality.', true);
+                    if (loadingStatus) {
+                        loadingStatus.textContent = 'Initialization taking longer than expected...';
+                    }
+                    setTimeout(checkInitializationStatus, 3000);
                 }
             })
             .catch(error => {
                 console.error('Error checking status:', error);
-                showStatusMessage('Error checking Galatea status', true);
+                if (loadingStatus) {
+                    loadingStatus.textContent = 'Error connecting to server. Retrying...';
+                }
+                setTimeout(checkInitializationStatus, 3000);
             });
     }
 

templates/index.html

@@ -8,7 +8,27 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
 </head>
 <body>
-    <div class="chat-container">
+    <!-- Loading Screen -->
+    <div id="loading-screen" class="loading-screen">
+        <div class="loading-content">
+            <div class="loading-avatar">
+                <div class="avatar circle">
+                    <div class="face">
+                        <div class="eyes"></div>
+                        <div class="mouth"></div>
+                    </div>
+                </div>
+            </div>
+            <h2>Initializing Galatea AI</h2>
+            <div class="loading-spinner"></div>
+            <p id="loading-status">Waking up and connecting to Gemini...</p>
+            <div class="loading-bar">
+                <div class="loading-progress" id="loading-progress"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="chat-container" id="chat-container" style="display: none;">
         <div class="header">
             <h1>Galatea AI</h1>
             <div class="avatar-container">