feat: add animated spinners for long-running actions and library scanning

Author: Datanoise

server/templates/admin.html

@@ -68,7 +68,7 @@
 
         .action-overlay { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(22, 27, 44, 0.8); backdrop-filter: blur(12px); border: 1px solid var(--border); padding: 2rem; border-radius: 24px; display: none; flex-direction: column; align-items: center; gap: 1rem; z-index: 2000; box-shadow: 0 20px 50px rgba(0,0,0,0.5); min-width: 150px; }
         .action-overlay i { width: 48px; height: 48px; }
-        .action-overlay .spinner { animation: rotate 2s linear infinite; color: var(--primary); }
+        .spinner { animation: rotate 2s linear infinite; color: var(--primary); display: inline-block; }
         .action-overlay .success { color: var(--success); }
         .action-overlay .error { color: var(--danger); }
         @keyframes rotate { 100% { transform: rotate(360deg); } }
@@ -722,21 +722,32 @@ <h2>Edit AutoDJ</h2>
         function submitForm(event, reload = false, onSuccess) {
             if (event) event.preventDefault();
             const form = event.target;
-            const formData = new FormData(form);
+            if (form.dataset.submitting === 'true') return false;
 
+            const formData = new FormData(form);
             const overlay = document.getElementById('action-overlay');
             const iconContainer = document.getElementById('action-icon-container');
             const text = document.getElementById('action-text');
 
+            form.dataset.submitting = 'true';
             overlay.style.display = 'flex';
             iconContainer.innerHTML = '<i data-lucide="loader-2" class="spinner"></i>';
             text.textContent = 'Processing...';
             lucide.createIcons();
 
+            // For actions that take longer than 2 seconds, update the text
+            const longActionTimeout = setTimeout(() => {
+                if (form.dataset.submitting === 'true') {
+                    text.textContent = 'Still working...';
+                }
+            }, 2000);
+
             fetch(form.action, {
                 method: 'POST',
                 body: formData
             }).then(r => {
+                clearTimeout(longActionTimeout);
+                form.dataset.submitting = 'false';
                 if (r.ok) {
                     iconContainer.innerHTML = '<i data-lucide="check-circle-2" class="success"></i>';
                     text.textContent = 'Success';
@@ -757,6 +768,8 @@ <h2>Edit AutoDJ</h2>
                     });
                 }
             }).catch(err => {
+                clearTimeout(longActionTimeout);
+                form.dataset.submitting = 'false';
                 iconContainer.innerHTML = '<i data-lucide="alert-triangle" class="error"></i>';
                 text.textContent = 'Error';
                 lucide.createIcons();
@@ -847,9 +860,10 @@ <h2>Edit AutoDJ</h2>
                 container.dataset.loaded = 'false';
                 return;
             }
-            container.innerHTML = '<div style="text-align:center; padding: 1rem; color: var(--text-dim); font-size: 0.8rem;">Scanning directory...</div>';
+            container.innerHTML = '<div style="text-align:center; padding: 2rem;"><i data-lucide="loader-2" class="spinner" style="width: 24px; height: 24px;"></i><div style="color: var(--text-dim); font-size: 0.8rem; margin-top: 0.5rem;">Scanning directory...</div></div>';
             container.style.display = 'block';
             container.dataset.loaded = 'true';
+            lucide.createIcons();
 
             fetch('/admin/player/files?mount=' + encodeURIComponent(mount) + '&path=' + encodeURIComponent(subPath))
                 .then(r => {

tinyice.pid

@@ -1 +1 @@
-36403
+36463