feat(auth): add loading state for user and role management (#1188)

packages/web/src/components/PermissionCatalogField/PermissionCatalogFieldLoader/index.tsx

@@ -0,0 +1,61 @@
+import {
+  IconButton,
+  Skeleton,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material';
+import SettingsIcon from '@mui/icons-material/Settings';
+import ControlledCheckbox from 'components/ControlledCheckbox';
+
+const PermissionCatalogFieldLoader = () => {
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell component="th" />
+            {[...Array(5)].map((row, index) => (
+              <TableCell key={index} component="th">
+                <Skeleton />
+              </TableCell>
+            ))}
+            <TableCell component="th" />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {[...Array(3)].map((row, index) => (
+            <TableRow key={index} sx={{ '&:last-child td': { border: 0 } }}>
+              <TableCell scope="row">
+                <Skeleton width={40} />
+              </TableCell>
+
+              {[...Array(5)].map((action, index) => (
+                <TableCell key={index} align="center">
+                  <Typography variant="subtitle2">
+                    <ControlledCheckbox name="value" />
+                  </Typography>
+                </TableCell>
+              ))}
+
+              <TableCell>
+                <Stack direction="row" gap={1} justifyContent="right">
+                  <IconButton color="info" size="small">
+                    <SettingsIcon />
+                  </IconButton>
+                </Stack>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default PermissionCatalogFieldLoader;