Merge pull request #39 from quoije/cursor/blur-effect-timing-6b09

Blur effect timing

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,7 +7,10 @@ function createPageLoader(options = {}) {
   let removed = false;
   let navResizeObserver = null;
 
-  const overlay = document.createElement('div');
+  // 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');
@@ -21,6 +24,11 @@ function createPageLoader(options = {}) {
         </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,7 +7,10 @@ function createPageLoader(options = {}) {
   let removed = false;
   let navResizeObserver = null;
 
-  const overlay = document.createElement('div');
+  // 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');
@@ -21,6 +24,11 @@ function createPageLoader(options = {}) {
         </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">