From d9ed2cdc9223103ffea6de40a8f1aa10fcc2780d Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 21 Dec 2025 21:59:02 +0000
Subject: [PATCH] Refactor: Preload page loader and use DOMContentLoaded

Co-authored-by: mathieumoran1 <mathieumoran1@gmail.com>
---
 public/checklist.html      | 12 +++++++++++-
 public/js/app_checklist.js | 36 ++++++++++++++++++++++--------------
 public/js/app_movies.js    | 36 ++++++++++++++++++++++--------------
 public/movies.html         | 12 +++++++++++-
 4 files changed, 66 insertions(+), 30 deletions(-)

diff --git a/public/checklist.html b/public/checklist.html
index 717783a..4dac099 100644
--- a/public/checklist.html
+++ b/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">
diff --git a/public/js/app_checklist.js b/public/js/app_checklist.js
index 0b91ba5..599483f 100644
--- a/public/js/app_checklist.js
+++ b/public/js/app_checklist.js
@@ -7,20 +7,28 @@ function createPageLoader(options = {}) {
   let removed = false;
   let navResizeObserver = null;
 
-  const overlay = document.createElement('div');
-  overlay.className = 'page-loader-overlay';
-  overlay.setAttribute('role', 'status');
-  overlay.setAttribute('aria-live', 'polite');
-  overlay.setAttribute('aria-busy', 'true');
+  // Reuse a preloaded overlay if present (prevents initial "clear" flash).
+  const preloadedOverlay = document.getElementById('page-loader-overlay');
+  const overlay = preloadedOverlay || document.createElement('div');
+  if (!preloadedOverlay) {
+    overlay.className = 'page-loader-overlay';
+    overlay.setAttribute('role', 'status');
+    overlay.setAttribute('aria-live', 'polite');
+    overlay.setAttribute('aria-busy', 'true');
 
-  overlay.innerHTML = `
-    <div class="page-loader-card page-loader-card--baronly">
-      <span class="visually-hidden">${title}</span>
-      <div class="page-loader-progress" aria-hidden="true">
-        <div class="page-loader-bar" id="page-loader-bar"></div>
+    overlay.innerHTML = `
+      <div class="page-loader-card page-loader-card--baronly">
+        <span class="visually-hidden">${title}</span>
+        <div class="page-loader-progress" aria-hidden="true">
+          <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;
     });
-  };
\ No newline at end of file
+  });
\ No newline at end of file
diff --git a/public/js/app_movies.js b/public/js/app_movies.js
index ff69751..fb0327b 100644
--- a/public/js/app_movies.js
+++ b/public/js/app_movies.js
@@ -7,20 +7,28 @@ function createPageLoader(options = {}) {
   let removed = false;
   let navResizeObserver = null;
 
-  const overlay = document.createElement('div');
-  overlay.className = 'page-loader-overlay';
-  overlay.setAttribute('role', 'status');
-  overlay.setAttribute('aria-live', 'polite');
-  overlay.setAttribute('aria-busy', 'true');
+  // Reuse a preloaded overlay if present (prevents initial "clear" flash).
+  const preloadedOverlay = document.getElementById('page-loader-overlay');
+  const overlay = preloadedOverlay || document.createElement('div');
+  if (!preloadedOverlay) {
+    overlay.className = 'page-loader-overlay';
+    overlay.setAttribute('role', 'status');
+    overlay.setAttribute('aria-live', 'polite');
+    overlay.setAttribute('aria-busy', 'true');
 
-  overlay.innerHTML = `
-    <div class="page-loader-card page-loader-card--baronly">
-      <span class="visually-hidden">${title}</span>
-      <div class="page-loader-progress" aria-hidden="true">
-        <div class="page-loader-bar" id="page-loader-bar"></div>
+    overlay.innerHTML = `
+      <div class="page-loader-card page-loader-card--baronly">
+        <span class="visually-hidden">${title}</span>
+        <div class="page-loader-progress" aria-hidden="true">
+          <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();
-  };
\ No newline at end of file
+  });
\ No newline at end of file
diff --git a/public/movies.html b/public/movies.html
index 1c109e0..c755142 100644
--- a/public/movies.html
+++ b/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">