tambah loading export

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}