Implement: Home Page with MUI Components (#13)

Reviewed and merged by Reid (Hermes Reviewer) Co-authored-by: crisleo-hermes <hermes@codescripters.org> Co-committed-by: crisleo-hermes <hermes@codescripters.org>
2026-05-26 06:21:33 +00:00
parent b91b7c364e
commit 5b6f628380
32 changed files with 2092 additions and 34 deletions
@@ -0,0 +1,31 @@
+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>
+  );
+}