feat(attachment-uploader): adding loadingindicator to AttachmentUploader component.

frontend/public/locales/en/translation.json

@@ -443,6 +443,7 @@
     "mb": "MB",
     "gb": "GB",
     "or": "OR",
+    "uploading_file": "Uploading file",
     "click_or_dragndrop_to_upload": "Click or Drag & Drop to upload a file",
     "button_block_message_label": "What would you like to know about us ?",
     "menu": "Menu",

frontend/public/locales/fr/translation.json

@@ -444,6 +444,7 @@
     "mb": "Mo",
     "gb": "Go",
     "or": "Ou",
+    "uploading_file": "Téléchargement du fichier",
     "click_or_dragndrop_to_upload": "Cliquez ou faîtes un Drag & Drop pour charger un fichier",
     "button_block_message_label": "Que souhaitez-vous savoir sur nous ?",
     "menu": "Menu",

frontend/src/app-components/attachment/AttachmentUploader.tsx

@@ -18,6 +18,8 @@ import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
 import { IAttachment } from "@/types/attachment.types";
 
+import LoadingIcon from "../icons/LoadingIcon";
+
 import { AttachmentDialog } from "./AttachmentDialog";
 import AttachmentThumbnail from "./AttachmentThumbnail";
 
@@ -78,12 +80,15 @@ const AttachmentUploader: FC<FileUploadProps> = ({
   );
   const { t } = useTranslate();
   const [isDragOver, setIsDragOver] = useState<boolean>(false);
+  const [isUploading, setIsUploading] = useState<boolean>(false);
   const { toast } = useToast();
   const { mutateAsync: uploadAttachment } = useUpload(EntityType.ATTACHMENT, {
     onError: () => {
+      setIsUploading(false);
       toast.error(t("message.upload_failed"));
     },
     onSuccess: (data) => {
+      setIsUploading(false);
       toast.success(t("message.success_save"));
       setAttachment(data);
       onChange && onChange(data);
@@ -95,6 +100,7 @@ const AttachmentUploader: FC<FileUploadProps> = ({
     e.preventDefault();
   };
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setIsUploading(true);
     if (event.target.files && event.target.files.length > 0) {
       const file = event.target.files.item(0);
 
@@ -120,11 +126,13 @@ const AttachmentUploader: FC<FileUploadProps> = ({
       const file = event.dataTransfer.files.item(0);
 
       if (file) {
+        setIsUploading(true);
         uploadAttachment(file);
       }
     }
   };
 
+  // Add a newline before the return statement
   return (
     <Grid>
       <AttachmentDialog
@@ -161,7 +169,12 @@ const AttachmentUploader: FC<FileUploadProps> = ({
               alignItems="center"
               sx={{ padding: "20px" }}
             >
-              {attachment ? (
+              {isUploading ? (
+                <>
+                  <LoadingIcon size={50} color="#1AA089" />
+                  <Typography>{t("label.uploading_file")}</Typography>
+                </>
+              ) : attachment ? (
                 <AttachmentThumbnail
                   id={attachment.id}
                   format="full"

frontend/src/app-components/icons/LoadingIcon.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { FC, SVGProps } from "react";
+
+const LoadingIcon: FC<
+  SVGProps<SVGSVGElement> & {
+    size?: number;
+    color?: string;
+  }
+> = ({ size = 50, color = "#000", ...rest }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 50 50"
+      fill={color}
+      {...rest}
+    >
+      <radialGradient
+        id="a12"
+        cx=".66"
+        fx=".66"
+        cy=".3125"
+        fy=".3125"
+        gradientTransform="scale(1.5)"
+      >
+        <stop offset="0" stopColor={color} />
+        <stop offset=".3" stopColor={color} stopOpacity=".9" />
+        <stop offset=".6" stopColor={color} stopOpacity=".6" />
+        <stop offset=".8" stopColor={color} stopOpacity=".3" />
+        <stop offset="1" stopColor={color} stopOpacity="0" />
+      </radialGradient>
+      <circle
+        fill="none"
+        stroke="url(#a12)"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeDasharray="200 1000"
+        strokeDashoffset="0"
+        cx="25"
+        cy="25"
+        r="20"
+        transform="rotate(0 25 25)" // Setting transform attribute
+      >
+        <animateTransform
+          type="rotate"
+          attributeName="transform"
+          calcMode="spline"
+          dur="2"
+          values="rotate(0 25 25);rotate(360 25 25)" // Rotate around the center
+          keyTimes="0;1"
+          keySplines="0 0 1 1"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle
+        fill="none"
+        opacity=".2"
+        stroke={color}
+        strokeLinecap="round"
+        cx="25"
+        cy="25"
+        r="20"
+      />
+    </svg>
+  );
+};
+
+export default LoadingIcon;