From 4c6406ef8f28521d34c8749c363f1c84a201ee69 Mon Sep 17 00:00:00 2001
From: Josh Patra <joshpatra12@gmail.com>
Date: Tue, 3 Feb 2026 15:06:38 -0500
Subject: [PATCH] Add full-screen restart overlay for better UX

- Shows overlay with spinner during container restart
- Displays status messages: stopping, waiting, reloading
- Shows elapsed time while waiting for server
- Extended timeout to 60 seconds
- Hides overlay and shows toast if timeout exceeded
---
 allstarr/wwwroot/index.html | 59 ++++++++++++++++++++++++++++++++++---
 1 file changed, 55 insertions(+), 4 deletions(-)

diff --git a/allstarr/wwwroot/index.html b/allstarr/wwwroot/index.html
index 3fc764a..d21aae3 100644
--- a/allstarr/wwwroot/index.html
+++ b/allstarr/wwwroot/index.html
@@ -292,6 +292,43 @@
             to { transform: translateX(0); opacity: 1; }
         }
         
+        .restart-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--bg-primary);
+            z-index: 9999;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            gap: 20px;
+        }
+        
+        .restart-overlay.active {
+            display: flex;
+        }
+        
+        .restart-overlay .spinner-large {
+            width: 48px;
+            height: 48px;
+            border: 3px solid var(--border);
+            border-top-color: var(--accent);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        
+        .restart-overlay h2 {
+            color: var(--text-primary);
+            font-size: 1.5rem;
+        }
+        
+        .restart-overlay p {
+            color: var(--text-secondary);
+        }
+        
         .modal {
             display: none;
             position: fixed;
@@ -784,6 +821,13 @@
         </div>
     </div>
     
+    <!-- Restart Overlay -->
+    <div class="restart-overlay" id="restart-overlay">
+        <div class="spinner-large"></div>
+        <h2>Restarting Container</h2>
+        <p id="restart-status">Applying configuration changes...</p>
+    </div>
+    
     <script>
         // Current edit setting state
         let currentEditKey = null;
@@ -1152,14 +1196,17 @@
             }
             
             try {
-                showToast('Restarting container...', 'success');
                 const res = await fetch('/api/admin/restart', { method: 'POST' });
                 const data = await res.json();
                 
                 if (res.ok) {
-                    showToast('Container restarting... Page will reload shortly.', 'success');
+                    // Show the restart overlay
+                    document.getElementById('restart-overlay').classList.add('active');
+                    document.getElementById('restart-status').textContent = 'Stopping container...';
+                    
                     // Wait a bit then start checking if the server is back
                     setTimeout(() => {
+                        document.getElementById('restart-status').textContent = 'Waiting for server to come back...';
                         checkServerAndReload();
                     }, 3000);
                 } else {
@@ -1172,7 +1219,7 @@
         
         async function checkServerAndReload() {
             let attempts = 0;
-            const maxAttempts = 30; // Try for 30 seconds
+            const maxAttempts = 60; // Try for 60 seconds
             
             const checkHealth = async () => {
                 try {
@@ -1181,7 +1228,8 @@
                         cache: 'no-store'
                     });
                     if (res.ok) {
-                        window.location.reload();
+                        document.getElementById('restart-status').textContent = 'Server is back! Reloading...';
+                        setTimeout(() => window.location.reload(), 500);
                         return;
                     }
                 } catch (e) {
@@ -1189,9 +1237,12 @@
                 }
                 
                 attempts++;
+                document.getElementById('restart-status').textContent = `Waiting for server to come back... (${attempts}s)`;
+                
                 if (attempts < maxAttempts) {
                     setTimeout(checkHealth, 1000);
                 } else {
+                    document.getElementById('restart-overlay').classList.remove('active');
                     showToast('Server may still be restarting. Please refresh manually.', 'warning');
                 }
             };