All files / src/features/Settlements/ReconciliationHub/components HubSkeleton.tsx

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
 
 
 
 
 
 
2x
27x
 
 
 
108x
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Skeleton, Stack } from "@mui/material";
 
/**
 * Grey-block loading layout matching the Hub mockup: a KPI row, two wide blocks
 * (cost breakdown / financial details), and a tall table block.
 */
const HubSkeleton = () => {
  return (
    <Stack gap="16px" data-testid="hub-skeleton">
      <Stack direction="row" gap="12px" flexWrap="wrap">
        {Array.from({ length: 4 }).map((_, i) => (
          <Skeleton key={i} variant="rectangular" height={88} sx={{ flex: "1 1 180px", borderRadius: "12px" }} />
        ))}
      </Stack>
      <Stack direction="row" gap="12px" flexWrap="wrap">
        <Skeleton variant="rectangular" height={220} sx={{ flex: "2 1 400px", borderRadius: "12px" }} />
        <Skeleton variant="rectangular" height={220} sx={{ flex: "1 1 240px", borderRadius: "12px" }} />
      </Stack>
      <Skeleton variant="rectangular" height={280} sx={{ borderRadius: "12px" }} />
    </Stack>
  );
};
 
export default HubSkeleton;