🎨 style(inputFileComponent): add loading spinner to input file component to indicate file upload progress

src/frontend/src/components/LoadingSpinner/index.tsx

@@ -0,0 +1,9 @@
+import { useContext, useEffect, useRef, useState } from "react";
+import { RadialProgressType } from "../../types/components";
+
+export default function LoadingSpinner({}) {
+
+  return (
+    <></>
+  );
+}

src/frontend/src/components/inputFileComponent/index.tsx

@@ -5,6 +5,7 @@ import { FileComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 import { INPUT_STYLE } from "../../constants";
 import { uploadFile } from "../../controllers/API";
+import RadialProgressComponent from "../RadialProgress";
 
 export default function InputFileComponent({
   value,
@@ -16,6 +17,7 @@ export default function InputFileComponent({
   editNode = false,
 }: FileComponentType) {
   const [myValue, setMyValue] = useState(value);
+  const [loading, setLoading] = useState(false);
   const { setErrorData } = useContext(alertContext);
   const { tabId } = useContext(TabsContext);
   useEffect(() => {
@@ -48,6 +50,8 @@ export default function InputFileComponent({
     input.multiple = false; // Allow only one file selection
 
     input.onchange = (e: Event) => {
+      setLoading(true);
+
       // Get the selected file
       const file = (e.target as HTMLInputElement).files?.[0];
 
@@ -68,9 +72,11 @@ export default function InputFileComponent({
             onChange(file.name);
             // sets the value that goes to the backend
             onFileChange(file_path);
+            setLoading(false);
           })
           .catch(() => {
             console.error("Error occurred while uploading file");
+            setLoading(false);
           });
       } else {
         // Show an error if the file type is not allowed
@@ -79,6 +85,7 @@ export default function InputFileComponent({
             "Please select a valid file. Only these file types are allowed:",
           list: fileTypes,
         });
+        setLoading(false);
       }
     };
 
@@ -92,7 +99,7 @@ export default function InputFileComponent({
         disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
       }
     >
-      <div className="w-full flex items-center gap-3">
+      <div className="w-full flex items-center gap-2">
         <span
           onClick={handleButtonClick}
           className={
@@ -107,9 +114,15 @@ export default function InputFileComponent({
           {myValue !== "" ? myValue : "No file"}
         </span>
         <button onClick={handleButtonClick}>
-          {!editNode && (
+          {(!editNode && !loading) && (
             <DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-ring" />
           )}
+          {
+            (!editNode && loading) && (
+              <span className="loading loading-spinner loading-sm pl-3 w-8 h-8 pointer-events-none"></span>
+            )
+          }
+
         </button>
       </div>
     </div>