ui(upload): spinner global au bootstrap et affichage placeholders pour fichiers en cours; reduce polling frequency

src/App.tsx

@@ -82,7 +82,7 @@ export default function App() {
       const interval = setInterval(() => {
         console.log('🔄 [APP] Polling - Vérification des résultats...')
         dispatch(loadFolderResults(folderHash))
-      }, 5000) // Polling toutes les 5 secondes
+      }, 8000) // Polling un peu moins fréquent
 
       dispatch(setPollingInterval(interval))
     },

src/store/documentSlice.ts

@@ -397,7 +397,7 @@ const documentSlice = createSlice({
 
         // Convertir les résultats en documents pour la compatibilité
         if (action.payload.results && action.payload.results.length > 0) {
-          state.documents = action.payload.results.map((result) => {
+          const completedDocs = action.payload.results.map((result) => {
             console.log(`[STORE] Mapping résultat:`, {
               fileHash: result.fileHash,
               fileName: result.document?.fileName,
@@ -414,9 +414,33 @@ const documentSlice = createSlice({
               previewUrl: `/api/folders/${action.payload.folderHash}/files/${result.fileHash}`,
             }
           })
+
+          // Ajouter des placeholders pour les fichiers en cours (pending)
+          const pendingItems = (action.payload.pending || []).map((p: any) => {
+            return {
+              id: p.fileHash,
+              name: p.fileHash,
+              mimeType: 'application/octet-stream',
+              size: 0,
+              uploadDate: new Date(p.timestamp),
+              status: 'processing' as const,
+              previewUrl: '',
+            }
+          })
+
+          state.documents = [...completedDocs, ...pendingItems]
         } else {
           console.log(`[STORE] Aucun résultat à mapper`)
-          state.documents = []
+          // Même s'il n'y a pas encore de résultats, afficher les pending en placeholders
+          state.documents = (action.payload.pending || []).map((p: any) => ({
+            id: p.fileHash,
+            name: p.fileHash,
+            mimeType: 'application/octet-stream',
+            size: 0,
+            uploadDate: new Date(p.timestamp),
+            status: 'processing' as const,
+            previewUrl: '',
+          }))
         }
 
         console.log(

src/views/UploadView.tsx

@@ -48,7 +48,7 @@ import type { Document } from '../types'
 
 export default function UploadView() {
   const dispatch = useAppDispatch()
-  const { documents, error, currentFolderHash, currentFolderName } = useAppSelector((state) => state.document)
+  const { documents, error, currentFolderHash, currentFolderName, loading, bootstrapped } = useAppSelector((state) => state.document)
 
   console.log('🏠 [UPLOAD_VIEW] Component loaded, documents count:', documents.length)
   const [previewDocument, setPreviewDocument] = useState<Document | null>(null)
@@ -196,6 +196,19 @@ export default function UploadView() {
     return <Description color="action" />
   }
 
+  // Affichage anti-clignotement: tant que le bootstrap n'est pas terminé ou que le chargement est en cours,
+  // on affiche un spinner global au lieu d'alterner rapidement les états de liste vide / liste remplie.
+  if (!bootstrapped || loading) {
+    return (
+      <Layout>
+        <Box display="flex" alignItems="center" justifyContent="center" minHeight={240}>
+          <CircularProgress size={28} sx={{ mr: 2 }} />
+          <Typography>Chargement des fichiers du dossier…</Typography>
+        </Box>
+      </Layout>
+    )
+  }
+
   return (
     <Layout>
       <Typography variant="h4" gutterBottom>
@@ -352,12 +365,16 @@ export default function UploadView() {
                                   | 'default'
                               }
                             />
+                            {doc.mimeType && doc.mimeType !== 'application/octet-stream' && (
                               <Chip label={doc.mimeType} size="small" variant="outlined" />
+                            )}
+                            {doc.size > 0 && (
                               <Chip
                                 label={`${(doc.size / 1024 / 1024).toFixed(2)} MB`}
                                 size="small"
                                 variant="outlined"
                               />
+                            )}
                           </Box>
                         </Box>
                       }