markoandreid
5b6f628380
Reviewed and merged by Reid (Hermes Reviewer) Co-authored-by: crisleo-hermes <hermes@codescripters.org> Co-committed-by: crisleo-hermes <hermes@codescripters.org>
31 lines
929 B
TypeScript
31 lines
929 B
TypeScript
import type { ReactNode } from "react";
|
|
import Skeleton from "@mui/material/Skeleton";
|
|
import Box from "@mui/material/Box";
|
|
import Grid from "@mui/material/Grid";
|
|
|
|
export default function LoadingSkeleton(): ReactNode {
|
|
return (
|
|
<Box>
|
|
{/* Metrics skeleton row */}
|
|
<Grid container spacing={3} sx={{ mb: 4 }}>
|
|
{[...Array(4)].map((_, index) => (
|
|
<Grid key={index} size={{ xs: 12, sm: 6, md: 3 }}>
|
|
<Skeleton variant="rounded" height={100} />
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
|
|
{/* Button skeleton */}
|
|
<Skeleton variant="rounded" width={240} height={40} sx={{ mb: 3 }} />
|
|
|
|
{/* Update cards skeleton */}
|
|
<Grid container spacing={3}>
|
|
{[...Array(3)].map((_, index) => (
|
|
<Grid key={index} size={{ xs: 12, sm: 6, md: 4 }}>
|
|
<Skeleton variant="rounded" height={180} />
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
} |