From 609f4a8b8f906b9923b1398dad03f14b083322ce Mon Sep 17 00:00:00 2001
From: Christine <132790780+aesteri@users.noreply.github.com>
Date: Sat, 23 Nov 2024 12:15:52 +0900
Subject: [PATCH 1/2] added loading feature for file upload

---
 src/components/FileUpload.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 3b53668..1327a3d 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Modal, Button, Notification, FileInput } from '@mantine/core';
+import { Modal, Button, Loader, Notification, FileInput } from '@mantine/core';
 import '@/css/FileUpload.css';
 
 interface FileUploadProps {
@@ -11,6 +11,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
 
   const handleFileChange = (files: File[]) => {
     if (files.length > 0) {
@@ -19,6 +20,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
   };
 
   const handleUpload = async () => {
+    setLoading(true);
     setError(null);
     setSuccess(null)
     if (selectedFiles.length > 0) {
@@ -60,6 +62,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
     } else {
       setError('Please select files to upload.');
     }
+    setLoading(false);
   };
 
   const toggleModal = () => {
@@ -104,8 +107,13 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
             </div>
           )}
         </div>
-
+        {loading && (
+          <Loader color="blue" /> 
+        )}
+        <br/>
         <Button onClick={handleUpload} style={{ marginTop: 10 }}>Upload</Button>
+        
+        
         {success && (
           <Notification color="green" onClose={() => setSuccess(null)} style={{ marginTop: 10 }}>
             {success}

From 4cb70c5227fed33341fbd735784d6efb3887bea5 Mon Sep 17 00:00:00 2001
From: Christine <132790780+aesteri@users.noreply.github.com>
Date: Sat, 23 Nov 2024 12:32:15 +0900
Subject: [PATCH 2/2] better altnerative

---
 src/components/FileUpload.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 1327a3d..2eef877 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Modal, Button, Loader, Notification, FileInput } from '@mantine/core';
+import { Modal, Button, Notification, FileInput } from '@mantine/core';
 import '@/css/FileUpload.css';
 
 interface FileUploadProps {
@@ -13,6 +13,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
   const [success, setSuccess] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
+
   const handleFileChange = (files: File[]) => {
     if (files.length > 0) {
       setSelectedFiles((prevFiles) => [...prevFiles, ...files]);
@@ -107,12 +108,8 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
             </div>
           )}
         </div>
-        {loading && (
-          <Loader color="blue" /> 
-        )}
-        <br/>
-        <Button onClick={handleUpload} style={{ marginTop: 10 }}>Upload</Button>
         
+        <Button loading={loading} loaderProps={{ type: 'dots' }} onClick={handleUpload} style={{ marginTop: 10 }} disabled={loading}>Upload</Button>
         
         {success && (
           <Notification color="green" onClose={() => setSuccess(null)} style={{ marginTop: 10 }}>