Refactor loading indicators to use CSS dots

This change replaces inline spinners with a more subtle CSS-based loading indicator. It also cleans up the inline loading text to be more concise.

Co-authored-by: mathieumoran1 <[email protected]>

public/css/app.css

@@ -20,4 +20,33 @@ footer {
 
   #copy {
     text-decoration: none;
+  }
+
+  /* Simple, clean loading indicator (no spinner spam) */
+  .loading-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 2rem 0;
+  }
+
+  .loading-dots {
+    display: inline-flex;
+    gap: 0.15rem;
+  }
+
+  .loading-dots span {
+    display: inline-block;
+    opacity: 0.2;
+    transform: translateY(-1px);
+    animation: loading-dot 1.1s infinite ease-in-out;
+  }
+
+  .loading-dots span:nth-child(2) { animation-delay: 0.15s; }
+  .loading-dots span:nth-child(3) { animation-delay: 0.30s; }
+
+  @keyframes loading-dot {
+    0%, 80%, 100% { opacity: 0.2; }
+    40% { opacity: 1; }
   }

public/js/app_checklist.js

@@ -8,11 +8,9 @@ window.onload = async function () {
       movieTableBody.innerHTML = `
         <tr>
           <td colspan="3" class="text-center py-4" aria-live="polite" aria-busy="true">
-            <div class="d-inline-flex align-items-center gap-2">
+            <div class="d-inline-flex align-items-center gap-2" role="status" aria-label="Chargement">
-              <div class="spinner-border text-secondary" role="status" aria-label="Chargement">
+              <span class="text-muted">Chargement</span>
-                <span class="visually-hidden">Chargement...</span>
+              <span class="loading-dots" aria-hidden="true"><span>.</span><span>.</span><span>.</span></span>
-              </div>
-              <span>Chargement…</span>
             </div>
           </td>
         </tr>
@@ -20,15 +18,11 @@ window.onload = async function () {
     }
 
     function setInlineLoading(el, label = 'Chargement…') {
+      // Keep the header clean: no inline spinners, just text.
       if (!el) return;
-      el.innerHTML = `
+      el.textContent = label;
-        <span class="d-inline-flex align-items-center gap-2" aria-live="polite" aria-busy="true">
+      el.setAttribute('aria-live', 'polite');
-          <span class="spinner-border spinner-border-sm text-secondary" role="status" aria-label="Chargement">
+      el.setAttribute('aria-busy', 'true');
-            <span class="visually-hidden">Chargement...</span>
-          </span>
-          <span>${label}</span>
-        </span>
-      `;
     }
 
     function showTableError(message) {
@@ -224,9 +218,7 @@ window.onload = async function () {
     showTableLoading();
     setInlineLoading(watchedRatioEl);
     const progressBarEl = document.getElementById('progress-bar');
-    if (progressBarEl) {
+    // Avoid extra "loading" animations; the table loader is enough.
-      progressBarEl.classList.add('progress-bar-striped', 'progress-bar-animated');
-    }
 
     let movies = [];
     let watchedMovies = [];
@@ -270,9 +262,7 @@ window.onload = async function () {
       const summary = await summaryPromise;
       watchedMovies = Array.isArray(summary?.watchedMovies) ? summary.watchedMovies : [];
 
-      if (progressBarEl) {
+      if (progressBarEl) progressBarEl.removeAttribute('aria-busy');
-        progressBarEl.classList.remove('progress-bar-striped', 'progress-bar-animated');
-      }
     } catch (e) {
       showTableError('Impossible de charger la checklist. Réessaie dans quelques instants.');
       return;

public/js/app_movies.js

@@ -2,24 +2,19 @@ window.onload = async function () {
     function setLoading(el) {
       if (!el) return;
       el.innerHTML = `
-        <div class="d-flex justify-content-center align-items-center my-5" aria-live="polite" aria-busy="true">
+        <div class="loading-indicator" role="status" aria-live="polite" aria-busy="true" aria-label="Chargement">
-          <div class="spinner-border text-secondary" role="status" aria-label="Chargement">
+          <span class="text-muted">Chargement</span>
-            <span class="visually-hidden">Chargement...</span>
+          <span class="loading-dots" aria-hidden="true"><span>.</span><span>.</span><span>.</span></span>
-          </div>
         </div>
       `;
     }
 
     function setInlineLoading(el, label = 'Chargement…') {
+      // Keep the header clean: no inline spinners, just text.
       if (!el) return;
-      el.innerHTML = `
+      el.textContent = label;
-        <span class="d-inline-flex align-items-center gap-2" aria-live="polite" aria-busy="true">
+      el.setAttribute('aria-live', 'polite');
-          <span class="spinner-border spinner-border-sm text-secondary" role="status" aria-label="Chargement">
+      el.setAttribute('aria-busy', 'true');
-            <span class="visually-hidden">Chargement...</span>
-          </span>
-          <span>${label}</span>
-        </span>
-      `;
     }
 
     function setLoadError(el, message) {