Checkpoint: Résolution du problème de latence d'affichage avec double requestAnimationFrame : cette technique garantit que le navigateur peint l'animation à l'écran avant de bloquer sur le fetch. Le premier requestAnimationFrame permet à React de mettre à jour l'état, le second force le navigateur à afficher visuellement l'animation avant de démarrer l'upload. Déployé sur le VPS de production.

client/src/pages/AdminGestionAttestations.tsx

@@ -196,14 +196,14 @@ function UploadAttestationDialog({
                     return;
                   }
 
-                  // Forcer le rendu synchrone de l'interface AVANT de démarrer l'upload
-                  flushSync(() => {
+                  // Afficher immédiatement l'état de chargement
                   setUploading(true);
                   setUploadProgress(0);
-                  });
 
-                  // Démarrer l'upload de manière asynchrone
-                  (async () => {
+                  // Utiliser requestAnimationFrame pour garantir que le navigateur
+                  // affiche l'animation AVANT de bloquer sur le fetch
+                  requestAnimationFrame(() => {
+                    requestAnimationFrame(async () => {
                       try {
                         const formData = new FormData();
                         formData.append('file', file);
@@ -242,7 +242,8 @@ function UploadAttestationDialog({
                       } finally {
                         setUploading(false);
                       }
-                  })(); // Fermer et exécuter la fonction async
+                    }); // Fermer requestAnimationFrame interne
+                  }); // Fermer requestAnimationFrame externe
                 }}
               />
             </label>

todo.md

@@ -1476,3 +1476,5 @@
 - [x] Corriger la latence d'affichage du message d'upload (forcer le rendu avant traitement)
 
 - [x] Restructurer le flux d'upload avec useEffect pour affichage immédiat
+
+- [x] Corriger la latence avec requestAnimationFrame pour affichage avant fetch bloquant