From 6159827aec871a56fa62fc844ae3cbaae0056d62 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Sat, 12 Apr 2025 12:14:39 +0100
Subject: [PATCH 1/2] feat: add loading spinner for document upload

---
 .../attachment/AttachmentUploader.tsx         | 37 +++++++++++++------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app-components/attachment/AttachmentUploader.tsx b/frontend/src/app-components/attachment/AttachmentUploader.tsx
index da373ff2..d18b8482 100644
--- a/frontend/src/app-components/attachment/AttachmentUploader.tsx
+++ b/frontend/src/app-components/attachment/AttachmentUploader.tsx
@@ -8,7 +8,15 @@
 
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import FolderCopyIcon from "@mui/icons-material/FolderCopy";
-import { Box, Button, Divider, Grid, styled, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Divider,
+  Grid,
+  styled,
+  Typography,
+} from "@mui/material";
 import { ChangeEvent, DragEvent, FC, useState } from "react";
 
 import { useUpload } from "@/hooks/crud/useUpload";
@@ -84,17 +92,20 @@ const AttachmentUploader: FC<FileUploadProps> = ({
   const dialogs = useDialogs();
   const [isDragOver, setIsDragOver] = useState<boolean>(false);
   const { toast } = useToast();
-  const { mutate: uploadAttachment } = useUpload(EntityType.ATTACHMENT, {
-    onError: () => {
-      toast.error(t("message.upload_failed"));
+  const { mutate: uploadAttachment, isLoading } = useUpload(
+    EntityType.ATTACHMENT,
+    {
+      onError: () => {
+        toast.error(t("message.upload_failed"));
+      },
+      onSuccess: (data) => {
+        toast.success(t("message.success_save"));
+        setAttachment(data);
+        onChange && onChange(data);
+        onUploadComplete && onUploadComplete();
+      },
     },
-    onSuccess: (data) => {
-      toast.success(t("message.success_save"));
-      setAttachment(data);
-      onChange && onChange(data);
-      onUploadComplete && onUploadComplete();
-    },
-  });
+  );
   const stopDefaults = (e: DragEvent) => {
     e.stopPropagation();
     e.preventDefault();
@@ -167,7 +178,9 @@ const AttachmentUploader: FC<FileUploadProps> = ({
               alignItems="center"
               sx={{ padding: "20px" }}
             >
-              {attachment ? (
+              {isLoading ? (
+                <CircularProgress />
+              ) : attachment ? (
                 <AttachmentThumbnail
                   id={attachment.id}
                   format="full"

From f8e4b3fb5571c8ffc87091e77f8230561171f9e0 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Sat, 12 Apr 2025 12:18:09 +0100
Subject: [PATCH 2/2] fix: simplify code syntax

---
 frontend/src/app-components/attachment/AttachmentUploader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app-components/attachment/AttachmentUploader.tsx b/frontend/src/app-components/attachment/AttachmentUploader.tsx
index d18b8482..3eb3bde8 100644
--- a/frontend/src/app-components/attachment/AttachmentUploader.tsx
+++ b/frontend/src/app-components/attachment/AttachmentUploader.tsx
@@ -101,8 +101,8 @@ const AttachmentUploader: FC<FileUploadProps> = ({
       onSuccess: (data) => {
         toast.success(t("message.success_save"));
         setAttachment(data);
-        onChange && onChange(data);
-        onUploadComplete && onUploadComplete();
+        onChange?.(data);
+        onUploadComplete?.();
       },
     },
   );