Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 69x 345x 5x 345x | import { Box, Skeleton } from "@mui/material";
function PermissionsTableSkeleton() {
return (
<Box
display="flex"
flexDirection="column"
data-testid="permissions-table-skeleton"
>
{Array(5)
.fill("")
.map((_, idx) => (
<CollapsableSkeleton key={idx} />
))}
</Box>
);
}
const CollapsableSkeleton = () => {
return (
<Box display="flex" flexDirection="column">
<Box display="flex" alignItems="center" paddingBlock="16px" gap={3}>
<Skeleton
width="20px"
height="20px"
variant="rectangular"
sx={{
borderRadius: "4px",
}}
/>
<Box display="flex" alignItems="center" width="100%">
<Box display="flex" alignItems="center" width="100%" gap={2}>
<Skeleton
width="36px"
height="36px"
variant="circular"
sx={{
borderRadius: "50%",
}}
/>
<Skeleton
width="78%"
height="12px"
variant="rounded"
sx={{
borderRadius: "16px",
}}
/>
</Box>
<Skeleton
width="24px"
height="24px"
variant="circular"
sx={{
borderRadius: "50%",
}}
/>
</Box>
</Box>
<Skeleton width="100%" height="1px" variant="rectangular" />
</Box>
);
};
export default PermissionsTableSkeleton;
|