Checkpoint: Résolution définitive de la latence d'affichage du message d'upload : utilisation de flushSync() de React DOM pour forcer un rendu synchrone et immédiat de l'interface avant le traitement du fichier. L'animation "Upload en cours..." s'affiche maintenant instantanément dès la sélection du fichier, sans aucune latence. Déployé sur le VPS de production.

client/src/pages/AdminGestionAttestations.tsx

@@ -1,4 +1,5 @@
 import { useState, useMemo, useEffect } from "react";
+import { flushSync } from "react-dom";
 import { trpc } from "@/lib/trpc";
 import DashboardLayout from "@/components/DashboardLayout";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -179,7 +180,7 @@ function UploadAttestationDialog({
                 accept=".pdf"
                 className="hidden"
                 disabled={uploading}
-                onChange={async (e) => {
+                onChange={(e) => {
                   const file = e.target.files?.[0];
                   if (!file) return;
 
@@ -195,13 +196,14 @@ function UploadAttestationDialog({
                     return;
                   }
 
-                  // Afficher immédiatement l'état de chargement
+                  // Forcer le rendu synchrone de l'interface AVANT de démarrer l'upload
+                  flushSync(() => {
                     setUploading(true);
                     setUploadProgress(0);
+                  });
 
-                  // Attendre que React mette à jour l'interface avant de démarrer l'upload
+                  // Démarrer l'upload de manière asynchrone
-                  await new Promise(resolve => setTimeout(resolve, 50));
+                  (async () => {
-
                     try {
                     const formData = new FormData();
                     formData.append('file', file);
@@ -240,6 +242,7 @@ function UploadAttestationDialog({
                   } finally {
                     setUploading(false);
                   }
+                  })(); // Fermer et exécuter la fonction async
                 }}
               />
             </label>

todo.md

@@ -1474,3 +1474,5 @@
 - [x] Améliorer le feedback visuel pendant le chargement du fichier d'attestation (indicateur immédiat)
 
 - [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