public/js/app_checklist.js

@@ -1,5 +1,35 @@
 window.onload = async function () {
     const token = localStorage.getItem('auth_token');
+    const movieTableBody = document.getElementById('movie-table-body');
+
+    function showTableLoading() {
+      if (!movieTableBody) return;
+      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="spinner-border text-secondary" role="status" aria-label="Chargement">
+                <span class="visually-hidden">Chargement...</span>
+              </div>
+              <span>Chargement…</span>
+            </div>
+          </td>
+        </tr>
+      `;
+    }
+
+    function showTableError(message) {
+      if (!movieTableBody) return;
+      movieTableBody.innerHTML = `
+        <tr>
+          <td colspan="3">
+            <div class="alert alert-danger my-2" role="alert">
+              ${message || 'Erreur lors du chargement.'}
+            </div>
+          </td>
+        </tr>
+      `;
+    }
 
     const DEFAULT_COMPLETION_MODAL = Object.freeze({
       title: 'Félicitations! very nice 🎉🎉🎉',
@@ -155,6 +185,13 @@ window.onload = async function () {
       window.location.href = '/';
     }
 
+    showTableLoading();
+
+    let movies = [];
+    let watchedMovies = [];
+    let watchedMoviesInYear = [];
+    let movieImdbIds = new Set();
+    try {
       // Fetch remaining data in parallel (Render latency is high).
       const [completionModalContent, moviesRes, watchedRes] = await Promise.all([
         fetchCompletionModalContent(),
@@ -176,18 +213,21 @@ window.onload = async function () {
         return;
       }
 
-    const movies = await moviesRes.json();
+      movies = await moviesRes.json();
 
       // Sort movies alphabetically by title
       movies.sort((a, b) => a.title.localeCompare(b.title, 'fr', { sensitivity: 'base' }));
 
-    let watchedMovies = [];
       if (watchedRes.ok) {
         watchedMovies = await watchedRes.json();
       }
+    } catch (e) {
+      showTableError('Impossible de charger la checklist. Réessaie dans quelques instants.');
+      return;
+    }
 
-    const movieImdbIds = new Set(movies.map((m) => m.imdb_id).filter(Boolean));
+    movieImdbIds = new Set(movies.map((m) => m.imdb_id).filter(Boolean));
-    let watchedMoviesInYear = watchedMovies.filter((wm) => movieImdbIds.has(wm.imdb_id));
+    watchedMoviesInYear = watchedMovies.filter((wm) => movieImdbIds.has(wm.imdb_id));
 
     const totalMoviesCount = movies.length;
     const watchedMoviesCount = watchedMoviesInYear.length;
@@ -248,7 +288,7 @@ window.onload = async function () {
 
     updateProgressBar(watchedMoviesCount, totalMoviesCount);
 
-    const movieTableBody = document.getElementById('movie-table-body');
+    if (movieTableBody) movieTableBody.innerHTML = '';
     movies.forEach(movie => {
       const watchedMovie = watchedMoviesInYear.find(wm => wm.imdb_id === movie.imdb_id);
       const watchedDate = watchedMovie ? new Date(watchedMovie.watchedDate).toLocaleString() : '';

public/js/app_movies.js

@@ -1,4 +1,24 @@
 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="spinner-border text-secondary" role="status" aria-label="Chargement">
+            <span class="visually-hidden">Chargement...</span>
+          </div>
+        </div>
+      `;
+    }
+
+    function setLoadError(el, message) {
+      if (!el) return;
+      el.innerHTML = `
+        <div class="alert alert-danger my-3" role="alert">
+          ${message || 'Erreur lors du chargement.'}
+        </div>
+      `;
+    }
+
     async function fetchActiveYear() {
       try {
         const res = await fetch('/api/settings/year', { method: 'GET' });
@@ -105,9 +125,13 @@ window.onload = async function () {
       window.location.href = '/';
     }
 
+    const moviesList = document.getElementById('movies-list');
+    setLoading(moviesList);
+
     // Populate "Dernière mise à jour des films" banner (per active year)
     await fetchMoviesLastUpdated(activeYear, token);
 
+    try {
       // Fetch movies + watched list in parallel (Render latency is high).
       const [res, watchedRes] = await Promise.all([
         fetch(`/api/movies?year=${encodeURIComponent(String(activeYear))}`, {
@@ -136,7 +160,6 @@ window.onload = async function () {
         watchedMovies = await watchedRes.json();
       }
 
-    const moviesList = document.getElementById('movies-list');
       const movieImdbIds = new Set(movies.map((m) => m.imdb_id).filter(Boolean));
       const watchedMoviesInYear = watchedMovies.filter((wm) => movieImdbIds.has(wm.imdb_id));
 
@@ -146,6 +169,8 @@ window.onload = async function () {
       const ratioText = `Vu: ${watchedMoviesCount} / ${totalMoviesCount} (${ratioPct}%)`;
       document.getElementById('watched-ratio').innerText = ratioText;
 
+      if (moviesList) moviesList.innerHTML = '';
+
       movies.forEach(movie => {
         const isChecked = watchedMoviesInYear.some(watchedMovie => watchedMovie.imdb_id === movie.imdb_id);
         const watchedMovie = watchedMoviesInYear.find(wm => wm.imdb_id === movie.imdb_id);
@@ -181,6 +206,9 @@ window.onload = async function () {
           </div>`;
         moviesList.appendChild(movieDiv);
       });
+    } catch (e) {
+      setLoadError(moviesList, 'Impossible de charger la liste des films. Réessaie dans quelques instants.');
+    }
 
     document.getElementById('log-off').addEventListener('click', function () {
       localStorage.removeItem('auth_token');

public/js/app_user-stat.js

@@ -3,6 +3,24 @@ window.onload = async function () {
     let winnersCache = null;
     let completionsCache = null;
 
+    function setTableBodyLoading(tbodyId, colspan) {
+      const tbody = document.getElementById(tbodyId);
+      if (!tbody) return;
+      const span = Number.isFinite(Number(colspan)) ? Number(colspan) : 1;
+      tbody.innerHTML = `
+        <tr>
+          <td colspan="${span}" class="text-center py-4" aria-live="polite" aria-busy="true">
+            <div class="d-inline-flex align-items-center gap-2">
+              <div class="spinner-border text-secondary" role="status" aria-label="Chargement">
+                <span class="visually-hidden">Chargement...</span>
+              </div>
+              <span class="text-muted">Chargement…</span>
+            </div>
+          </td>
+        </tr>
+      `;
+    }
+
     async function fetchActiveYear() {
       try {
         const res = await fetch('/api/settings/year', { method: 'GET' });
@@ -229,6 +247,16 @@ window.onload = async function () {
     }
 
     try {
+      // Show loading states immediately (avoid "blank" panels)
+      const table = document.querySelector('.user-table');
+      const spinner = document.getElementById('loading-spinner');
+      const statsError = document.getElementById('stats-error');
+      if (spinner) spinner.classList.remove('d-none');
+      if (table) table.classList.add('d-none');
+      if (statsError) statsError.classList.add('d-none');
+      setTableBodyLoading('winners-table-body', 2);
+      setTableBodyLoading('completers-table-body', 4);
+
       const activeYear = await fetchActiveYear();
       if (activeYear) {
         document.title = `Pool Oscars ${activeYear} - Statistiques des utilisateurs`;
@@ -257,9 +285,6 @@ window.onload = async function () {
 
       const stats = await statsRes.json();
       const userTableBody = document.getElementById('user-table-body');
-      const table = document.querySelector('.user-table');
-      const spinner = document.getElementById('loading-spinner');
-      const statsError = document.getElementById('stats-error');
 
       // Ensure watchedRatio is treated as a number and sort in descending order
       stats.sort((a, b) => parseFloat(b.watchedRatio) - parseFloat(a.watchedRatio));

public/user-stat.html

@@ -91,8 +91,10 @@
       <div id="stats-error" class="alert alert-danger d-none" role="alert"></div>
 
       <!-- Spinner shown while loading -->
-      <div id="loading-spinner" class="spinner-border text-primary" role="status">
+      <div id="loading-spinner" class="d-flex justify-content-center align-items-center my-5" aria-live="polite" aria-busy="true">
-        <span class="visually-hidden">Loading...</span>
+        <div class="spinner-border text-secondary" role="status" aria-label="Chargement">
+          <span class="visually-hidden">Chargement...</span>
+        </div>
       </div>
 
       <!-- Table for users and movies watched -->
@@ -123,7 +125,14 @@
           </thead>
           <tbody id="winners-table-body">
             <tr>
-              <td colspan="2" class="text-muted">Chargement…</td>
+              <td colspan="2" class="text-center py-4" aria-live="polite" aria-busy="true">
+                <div class="d-inline-flex align-items-center gap-2">
+                  <div class="spinner-border text-secondary" role="status" aria-label="Chargement">
+                    <span class="visually-hidden">Chargement...</span>
+                  </div>
+                  <span class="text-muted">Chargement…</span>
+                </div>
+              </td>
             </tr>
           </tbody>
         </table>
@@ -146,7 +155,14 @@
           </thead>
           <tbody id="completers-table-body">
             <tr>
-              <td colspan="4" class="text-muted">Chargement…</td>
+              <td colspan="4" class="text-center py-4" aria-live="polite" aria-busy="true">
+                <div class="d-inline-flex align-items-center gap-2">
+                  <div class="spinner-border text-secondary" role="status" aria-label="Chargement">
+                    <span class="visually-hidden">Chargement...</span>
+                  </div>
+                  <span class="text-muted">Chargement…</span>
+                </div>
+              </td>
             </tr>
           </tbody>
         </table>