Refactor: Preload page loader and use DOMContentLoaded

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

public/checklist.html

@@ -49,7 +49,17 @@
     }
   </style>
 </head>
-<body class="bg-light">
+<body class="bg-light page-loading">
+
+<!-- Preloaded loader overlay to avoid initial "clear" flash -->
+<div id="page-loader-overlay" class="page-loader-overlay" data-preloaded="true" role="status" aria-live="polite" aria-busy="true">
+  <div class="page-loader-card page-loader-card--baronly">
+    <span class="visually-hidden">Chargement…</span>
+    <div class="page-loader-progress" aria-hidden="true">
+      <div class="page-loader-bar" id="page-loader-bar" style="width: 8%;"></div>
+    </div>
+  </div>
+</div>
 
 <!-- Black banner with buttons and user info -->
 <nav class="navbar navbar-expand-lg navbar-custom">

public/js/app_checklist.js

@@ -7,20 +7,28 @@ function createPageLoader(options = {}) {
   let removed = false;
   let navResizeObserver = null;
 
-  const overlay = document.createElement('div');
+  // Reuse a preloaded overlay if present (prevents initial "clear" flash).
-  overlay.className = 'page-loader-overlay';
+  const preloadedOverlay = document.getElementById('page-loader-overlay');
-  overlay.setAttribute('role', 'status');
+  const overlay = preloadedOverlay || document.createElement('div');
-  overlay.setAttribute('aria-live', 'polite');
+  if (!preloadedOverlay) {
-  overlay.setAttribute('aria-busy', 'true');
+    overlay.className = 'page-loader-overlay';
+    overlay.setAttribute('role', 'status');
+    overlay.setAttribute('aria-live', 'polite');
+    overlay.setAttribute('aria-busy', 'true');
 
-  overlay.innerHTML = `
+    overlay.innerHTML = `
-    <div class="page-loader-card page-loader-card--baronly">
+      <div class="page-loader-card page-loader-card--baronly">
-      <span class="visually-hidden">${title}</span>
+        <span class="visually-hidden">${title}</span>
-      <div class="page-loader-progress" aria-hidden="true">
+        <div class="page-loader-progress" aria-hidden="true">
-        <div class="page-loader-bar" id="page-loader-bar"></div>
+          <div class="page-loader-bar" id="page-loader-bar"></div>
+        </div>
       </div>
-    </div>
+    `;
-  `;
+  } else {
+    // Keep screen reader label up to date.
+    const label = overlay.querySelector('.visually-hidden');
+    if (label) label.textContent = title;
+  }
 
   const barEl = () => overlay.querySelector('#page-loader-bar');
 
@@ -105,7 +113,7 @@ function createPageLoader(options = {}) {
   return { setProgress, setSubtitle, done, fail };
 }
 
-window.onload = async function () {
+window.addEventListener('DOMContentLoaded', async function () {
     const pageLoader = createPageLoader({
       title: 'Chargement de la checklist',
       subtitle: 'Récupération des données…'
@@ -523,4 +531,4 @@ window.onload = async function () {
       rewardVideo.pause();
       rewardVideo.currentTime = 0;
     });
-  };
+  });

public/js/app_movies.js

@@ -7,20 +7,28 @@ function createPageLoader(options = {}) {
   let removed = false;
   let navResizeObserver = null;
 
-  const overlay = document.createElement('div');
+  // Reuse a preloaded overlay if present (prevents initial "clear" flash).
-  overlay.className = 'page-loader-overlay';
+  const preloadedOverlay = document.getElementById('page-loader-overlay');
-  overlay.setAttribute('role', 'status');
+  const overlay = preloadedOverlay || document.createElement('div');
-  overlay.setAttribute('aria-live', 'polite');
+  if (!preloadedOverlay) {
-  overlay.setAttribute('aria-busy', 'true');
+    overlay.className = 'page-loader-overlay';
+    overlay.setAttribute('role', 'status');
+    overlay.setAttribute('aria-live', 'polite');
+    overlay.setAttribute('aria-busy', 'true');
 
-  overlay.innerHTML = `
+    overlay.innerHTML = `
-    <div class="page-loader-card page-loader-card--baronly">
+      <div class="page-loader-card page-loader-card--baronly">
-      <span class="visually-hidden">${title}</span>
+        <span class="visually-hidden">${title}</span>
-      <div class="page-loader-progress" aria-hidden="true">
+        <div class="page-loader-progress" aria-hidden="true">
-        <div class="page-loader-bar" id="page-loader-bar"></div>
+          <div class="page-loader-bar" id="page-loader-bar"></div>
+        </div>
       </div>
-    </div>
+    `;
-  `;
+  } else {
+    // Keep screen reader label up to date.
+    const label = overlay.querySelector('.visually-hidden');
+    if (label) label.textContent = title;
+  }
 
   const barEl = () => overlay.querySelector('#page-loader-bar');
 
@@ -133,7 +141,7 @@ async function waitForImagesIn(containerEl, onProgress) {
   ]);
 }
 
-window.onload = async function () {
+window.addEventListener('DOMContentLoaded', async function () {
     const pageLoader = createPageLoader({
       title: 'Chargement des films',
       subtitle: 'Récupération des données…'
@@ -414,4 +422,4 @@ window.onload = async function () {
     }
 
     filterMovies();
-  };
+  });

public/movies.html

@@ -64,7 +64,17 @@
     }
   </style>
 </head>
-<body class="bg-light">
+<body class="bg-light page-loading">
+
+<!-- Preloaded loader overlay to avoid initial "clear" flash -->
+<div id="page-loader-overlay" class="page-loader-overlay" data-preloaded="true" role="status" aria-live="polite" aria-busy="true">
+  <div class="page-loader-card page-loader-card--baronly">
+    <span class="visually-hidden">Chargement…</span>
+    <div class="page-loader-progress" aria-hidden="true">
+      <div class="page-loader-bar" id="page-loader-bar" style="width: 8%;"></div>
+    </div>
+  </div>
+</div>
 
 <!-- Black banner with buttons and user info -->
 <nav class="navbar navbar-expand-lg navbar-custom">