tambah loading export

frontend/client-portal/src/@types/table.ts

@@ -126,5 +126,6 @@ export type TableListProps<DataType> = {
     status: string;
     handleExportReport: (event: FormEvent<HTMLFormElement>) => void;
   };
+  exportLoading?: boolean;
 };
 /* -------------------------------------------------------------------------- */

frontend/client-portal/src/components/Table.tsx

@@ -28,6 +28,7 @@ import BaseTablePagination from './BaseTablePagination';
 import { Download, Search as SearchIcon } from '@mui/icons-material';
 /* ---------------------------------- types --------------------------------- */
 import { DivisionDataProps, StatusDataProps, TableListProps } from '../@types/table';
+import { LoadingButton } from '@mui/lab';
 
 export default function Table<T>({
   headCells,
@@ -42,6 +43,7 @@ export default function Table<T>({
   filterEndDate,
   searchs,
   exportReport,
+  exportLoading,
 }: TableListProps<T>) {
   /* ------------------------------- handle sort ------------------------------ */
   const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
@@ -308,16 +310,18 @@ export default function Table<T>({
           {exportReport && exportReport.useExport ? (
             <Grid item xs={12} lg={2} xl={2}>
               <FormControl fullWidth>
-                <Button
+                <LoadingButton
+                  id="upload-button"
                   variant="contained"
-                  sx={{ p: 2 }}
+                  startIcon={<Download />}
+                  sx={{ p: 1.8 }}
                   onClick={() => exportReport.handleExportReport()}
+                  loading={exportLoading}
                 >
-                  <Download />
                   <Typography variant="inherit" sx={{ marginLeft: 1 }}>
                     Export
                   </Typography>
-                </Button>
+                </LoadingButton>
               </FormControl>
             </Grid>
           ) : null}

frontend/client-portal/src/pages/AlarmCenter/List.tsx

@@ -194,7 +194,7 @@ export default function List() {
   const handleExportReport = async () => {
     
     var filter = Object.fromEntries([...searchParams.entries()]);
-
+    setIsLoading(true)
     await axios
       .get(corporateValue + '/claims/exportAlrmCenter/'+(startDateValue ? startDateValue : 'all')+'/'+(endDateValue ? endDateValue : 'all'), { params: filter })
       .then((res) => {
@@ -202,6 +202,7 @@ export default function List() {
           variant: 'success',
           anchorOrigin: { horizontal: 'right', vertical: 'top' },
         });
+        setIsLoading(false)
 
         document.location.href = res.data.data.file_url;
       })
@@ -210,6 +211,7 @@ export default function List() {
           variant: 'error',
           anchorOrigin: { horizontal: 'right', vertical: 'top' },
         })
+        
       );
   };
   const exportReport = {
@@ -332,6 +334,7 @@ export default function List() {
         filterStartDate={filterStartDate}
         filterEndDate={filterEndDate}
         exportReport={exportReport}
+        exportLoading={isLoading}
       />
     </Stack>
   );