ALwrity Version 0.5.0 (Fastapi + React )

frontend/src/components/shared/LoadingSkeleton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box, Container, Skeleton, Grid } from '@mui/material';
+import { DashboardContainer } from './styled';
+import { LoadingSkeletonProps } from './types';
+
+const LoadingSkeleton: React.FC<LoadingSkeletonProps> = ({ 
+  itemCount = 8, 
+  itemHeight = 200, 
+  headerHeight = 80 
+}) => {
+  return (
+    <DashboardContainer>
+      <Container maxWidth="xl">
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+          <Skeleton variant="rectangular" height={headerHeight} sx={{ borderRadius: 2 }} />
+          <Grid container spacing={3}>
+            {Array.from({ length: itemCount }).map((_, index) => (
+              <Grid item xs={12} sm={6} md={4} lg={3} key={index}>
+                <Skeleton variant="rectangular" height={itemHeight} sx={{ borderRadius: 2 }} />
+              </Grid>
+            ))}
+          </Grid>
+        </Box>
+      </Container>
+    </DashboardContainer>
+  );
+};
+
+export default LoadingSkeleton;