Add Loading Button when Import

frontend/dashboard/src/pages/Corporates/Benefit/List.tsx

@@ -60,6 +60,7 @@ import Form from './Form';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
 import BasePagination from '../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
+import { LoadingButton } from '@mui/lab';
 
 export default function PlanList() {
   const { themeStretch } = useSettings();
@@ -109,6 +110,7 @@ export default function PlanList() {
     const createMenu = Boolean(anchorEl);
     const importPlan = useRef<HTMLInputElement>(null);
     const [currentImportFileName, setCurrentImportFileName] = useState(null);
+    const [importLoading, setImportLoading] = useState(false);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
       setAnchorEl(event.currentTarget);
@@ -144,6 +146,7 @@ export default function PlanList() {
       if (importPlan.current?.files.length) {
         const formData = new FormData();
         formData.append('file', importPlan.current?.files[0]);
+        setImportLoading(true);
         axios
           .post(`corporates/${corporate_id}/import-plan-benefit`, formData)
           .then((response) => {
@@ -151,6 +154,7 @@ export default function PlanList() {
             loadDataTableData();
             setImportResult(response.data);
             // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+            setImportLoading(false);
           })
           .catch((response) => {
             enqueueSnackbar(
@@ -158,6 +162,7 @@ export default function PlanList() {
                 response.message,
               { variant: 'error' }
             );
+            setImportLoading(false);
           });
       } else {
         enqueueSnackbar('No File Selected', { variant: 'warning' });
@@ -234,15 +239,16 @@ export default function PlanList() {
               </Button>
             </ButtonGroup>
 
-            <Button
+            <LoadingButton
               id="upload-button"
               variant="outlined"
               startIcon={<UploadIcon />}
               sx={{ p: 1.8 }}
               onClick={handleUpload}
+              loading={importLoading}
             >
               Upload
-            </Button>
+            </LoadingButton>
           </Stack>
         )}
         {importResult && (

frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/List.tsx

@@ -52,6 +52,7 @@ import { Icd } from '../../../@types/diagnosis';
 import BasePagination from '../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
 import { Icon } from '@iconify/react';
+import { LoadingButton } from '@mui/lab';
 
 export default function List(props: any) {
   const { themeStretch } = useSettings();
@@ -101,6 +102,7 @@ export default function List(props: any) {
     const createMenu = Boolean(anchorEl);
     const importForm = useRef<HTMLInputElement>(null);
     const [currentImportFileName, setCurrentImportFileName] = useState(null);
+    const [importLoading, setImportLoading] = useState(false);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
       setAnchorEl(event.currentTarget);
@@ -136,12 +138,15 @@ export default function List(props: any) {
       if (importForm.current?.files.length) {
         const formData = new FormData();
         formData.append('file', importForm.current?.files[0]);
+        setImportLoading(true);
         axios
           .post(`corporates/${corporate_id}/diagnosis-exclusions/import`, formData)
           .then((response) => {
             handleCancelImportButton();
             loadDataTableData();
             setImportResult(response.data);
+            
+            setImportLoading(false);
             // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
           })
           .catch((response) => {
@@ -150,7 +155,9 @@ export default function List(props: any) {
                 response.message,
               { variant: 'error' }
             );
-          });
+            
+            setImportLoading(false);
+          })
       } else {
         enqueueSnackbar('No File Selected', { variant: 'warning' });
       }
@@ -225,15 +232,16 @@ export default function List(props: any) {
               </Button>
             </ButtonGroup>
 
-            <Button
+            <LoadingButton
               id="upload-button"
               variant="outlined"
               startIcon={<UploadIcon />}
               sx={{ p: 1.8 }}
               onClick={handleUpload}
+              loading={importLoading}
             >
               Upload
-            </Button>
+            </LoadingButton>
           </Stack>
         )}
         {importResult && (

frontend/dashboard/src/pages/Corporates/Member/List.tsx

@@ -139,6 +139,7 @@ export default function CorporatePlanList() {
     const createMenu = Boolean(anchorEl);
     const importPlan = useRef<HTMLInputElement>(null);
     const [currentImportFileName, setCurrentImportFileName] = useState(null);
+    const [importLoading, setImportLoading] = useState(false);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
       setAnchorEl(event.currentTarget);
@@ -174,12 +175,14 @@ export default function CorporatePlanList() {
       if (importPlan.current?.files.length) {
         const formData = new FormData();
         formData.append('file', importPlan.current?.files[0]);
+        setImportLoading(true);
         axios
           .post(`corporates/${corporate_id}/members/import`, formData)
           .then((response) => {
             handleCancelImportButton();
             loadDataTableData();
             setImportResult(response.data);
+            setImportLoading(false);
           })
           .catch((response) => {
             enqueueSnackbar(
@@ -187,6 +190,7 @@ export default function CorporatePlanList() {
                 response.message,
               { variant: 'error' }
             );
+            setImportLoading(false);
           });
       } else {
         enqueueSnackbar('No File Selected', { variant: 'warning' });
@@ -263,15 +267,16 @@ export default function CorporatePlanList() {
               </Button>
             </ButtonGroup>
 
-            <Button
+            <LoadingButton
               id="upload-button"
               variant="outlined"
               startIcon={<UploadIcon />}
               sx={{ p: 1.8 }}
               onClick={handleUpload}
+              loading={importLoading}
             >
               Upload
-            </Button>
+            </LoadingButton>
           </Stack>
         )}
         {importResult && (

frontend/dashboard/src/pages/Corporates/Plan/List.tsx

@@ -43,6 +43,7 @@ import { Plan } from '../../../@types/corporates';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
 import BasePagination from '../../../components/BasePagination';
 import { enqueueSnackbar } from 'notistack';
+import { LoadingButton } from '@mui/lab';
 
 export default function CorporatePlanList() {
   const { themeStretch } = useSettings();
@@ -92,6 +93,7 @@ export default function CorporatePlanList() {
     const createMenu = Boolean(anchorEl);
     const importPlan = useRef<HTMLInputElement>(null);
     const [currentImportFileName, setCurrentImportFileName] = useState(null);
+    const [importLoading, setImportLoading] = useState(false);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
       setAnchorEl(event.currentTarget);
@@ -127,6 +129,8 @@ export default function CorporatePlanList() {
       if (importPlan.current?.files.length) {
         const formData = new FormData();
         formData.append('file', importPlan.current?.files[0]);
+        
+        setImportLoading(true);
         axios
           .post(`corporates/${corporate_id}/import-plan-benefit`, formData)
           .then((response) => {
@@ -134,6 +138,7 @@ export default function CorporatePlanList() {
             loadDataTableData();
             setImportResult(response.data);
             // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+            setImportLoading(false);
           })
           .catch((response) => {
             enqueueSnackbar(
@@ -141,6 +146,7 @@ export default function CorporatePlanList() {
                 response.message,
               { variant: 'error' }
             );
+            setImportLoading(false);
           });
       } else {
         enqueueSnackbar('No File Selected', { variant: 'warning' });
@@ -216,15 +222,16 @@ export default function CorporatePlanList() {
               </Button>
             </ButtonGroup>
 
-            <Button
+            <LoadingButton
               id="upload-button"
               variant="outlined"
               startIcon={<UploadIcon />}
               sx={{ p: 1.8 }}
               onClick={handleUpload}
+              loading={importLoading}
             >
               Upload
-            </Button>
+            </LoadingButton>
           </Stack>
         )}
         {importResult && (