From 829595fec7b17128e5ef63f81e8be6fd150fadab Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 9 Oct 2025 10:47:31 +0000
Subject: [PATCH] Show a waiting modal during image uploads

Introduce a loading modal using `Dialog` and `Loader2` components to indicate pending image uploads within the `MediaUpload` component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/8Nctbk0
---
 .replit                                |  4 ++++
 client/src/components/media-upload.tsx | 21 ++++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/.replit b/.replit
index d2b4742..04050d4 100644
--- a/.replit
+++ b/.replit
@@ -46,6 +46,10 @@ externalPort = 6000
 localPort = 43245
 externalPort = 3001
 
+[[ports]]
+localPort = 45149
+externalPort = 8000
+
 [[ports]]
 localPort = 46681
 externalPort = 5173
diff --git a/client/src/components/media-upload.tsx b/client/src/components/media-upload.tsx
index ce28afd..4f825ea 100644
--- a/client/src/components/media-upload.tsx
+++ b/client/src/components/media-upload.tsx
@@ -1,9 +1,10 @@
 import { useState, useCallback } from "react";
 import { useDropzone } from "react-dropzone";
 import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { apiRequest, queryClient } from "@/lib/queryClient";
-import { CloudUpload, Image as ImageIcon, Video, X, Upload } from "lucide-react";
+import { CloudUpload, Image as ImageIcon, Video, X, Upload, Loader2 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { SiFacebook, SiInstagram } from "react-icons/si";
 
@@ -219,6 +220,24 @@ export default function MediaUpload() {
           </div>
         </div>
       </div>
+
+      <Dialog open={uploadMutation.isPending}>
+        <DialogContent className="sm:max-w-md [&>button]:hidden">
+          <div className="flex flex-col items-center justify-center py-8">
+            <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-6">
+              <Loader2 className="w-10 h-10 text-primary animate-spin" />
+            </div>
+            <h3 className="text-xl font-semibold text-foreground mb-2">
+              Upload en cours...
+            </h3>
+            <p className="text-sm text-muted-foreground text-center">
+              Votre image est en cours de téléchargement et de traitement.
+              <br />
+              Veuillez patienter.
+            </p>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }