diff --git a/client/src/pages/AdminGestionAttestations.tsx b/client/src/pages/AdminGestionAttestations.tsx index 07b619e..af0eb83 100644 --- a/client/src/pages/AdminGestionAttestations.tsx +++ b/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 }} /> diff --git a/todo.md b/todo.md index 4120591..7be0528 100644 --- a/todo.md +++ b/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