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,14 +196,15 @@ function UploadAttestationDialog({
                     return;
                   }
 
-                  // Afficher immédiatement l'état de chargement
-                  setUploading(true);
-                  setUploadProgress(0);
+                  // 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
-                  await new Promise(resolve => setTimeout(resolve, 50));
-
-                  try {
+                  // Démarrer l'upload de manière asynchrone
+                  (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>