update table loading UI (#717)

Signed-off-by: ryjiang <[email protected]>

client/src/components/grid/LoadingTable.tsx

@@ -1,40 +1,22 @@
-import { Theme } from '@mui/material';
-import { Skeleton } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-
-const getStyles = makeStyles((theme: Theme) => ({
-  wrapper: {
-    padding: theme.spacing(2),
-    paddingTop: 0,
-    color: theme.palette.text.primary,
-    backgroundColor: theme.palette.background.paper,
-  },
-  skeleton: {
-    transform: 'scale(1)',
-    background: `linear-gradient(90deg, ${theme.palette.divider} 0%, ${theme.palette.divider} 50%)`,
-  },
-  tr: {
-    display: 'grid',
-    gridTemplateColumns: '10% 89%',
-    gap: '1%',
-    marginTop: theme.spacing(3),
-  },
-}));
+import { CircularProgress, Typography, Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 
 const LoadingTable = (props: { wrapperClass?: string; count: number }) => {
   const { wrapperClass = '', count } = props;
-  const classes = getStyles();
-  const rows = Array(count || 5).fill(1);
+  const { t: btnTrans } = useTranslation('btn');
 
   return (
-    <div className={`${classes.wrapper} ${wrapperClass}`}>
-      {rows.map((row, index) => (
-        <div key={index} className={classes.tr} role="skeleton">
-          <Skeleton height={16} classes={{ root: classes.skeleton }} />
-          <Skeleton height={16} classes={{ root: classes.skeleton }} />
-        </div>
-      ))}
-    </div>
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      gap={2}
+      p={2}
+      className={wrapperClass}
+    >
+      <CircularProgress size={24} />
+      <Typography variant="body1">{btnTrans('loading')}...</Typography>
+    </Box>
   );
 };
 

client/src/components/grid/Table.tsx

@@ -22,7 +22,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     color: theme.palette.text.primary,
     backgroundColor: theme.palette.background.paper,
   },
-  box: {},
   table: {
     minWidth: '100%',
   },
@@ -125,7 +124,7 @@ const EnhancedTable: FC<TableType> = props => {
 
   return (
     <TableContainer className={classes.root}>
-      <Box height="100%" className={classes.box}>
+      <Box height="100%">
         {!isLoading && (
           <Table
             stickyHeader