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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 67x 4x 67x 67x 67x | import { Stack, Skeleton } from "@mui/material";
import TaskCard from "@features/Merchants/MerchantSidePanel/UnderwritingTasks/components/TaskCard";
import GiveDivider from "@shared/GiveDivider/GiveDivider";
import { useAppTheme } from "@theme/v2/Provider";
import { styled } from "@theme/v2/Provider";
import GiveCheckDataRowsSkeleton from "./GiveCheckDataRowsSkeleton";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
const AnimatedSkeletonsContainer = styled(Stack)(() => ({
"& .MuiSkeleton-root": {
animation: "none !important",
},
"@keyframes skeletonPulse": {
"0%": {
opacity: 1,
},
"50%": {
opacity: 0.7,
},
"100%": {
opacity: 1,
},
},
animation: "skeletonPulse 1.5s ease-in-out infinite",
}));
const GiveLatestCheckSectionSkeleton = () => {
const { palette } = useAppTheme();
const { isMobileView } = useCustomThemeV2();
return (
<TaskCard title="Latest Check">
<AnimatedSkeletonsContainer spacing={2} width="100%">
{/* Row 1: Icon + Header info + Buttons */}
<Stack
justifyContent="space-between"
width="100%"
alignItems="center"
flexDirection="row"
gap="8px"
>
<Stack gap="12px" alignItems="center" flexDirection="row">
<Skeleton variant="circular" width={48} height={48} />
{!isMobileView && (
<Skeleton
variant="rounded"
width={150}
height={24}
sx={{ borderRadius: "12px" }}
/>
)}
</Stack>
{/* Buttons skeleton */}
<Stack gap="16px" flexDirection="row">
<Skeleton variant="rounded" width={100} height={34} />
<Skeleton variant="rounded" width={100} height={34} />
</Stack>
</Stack>
{isMobileView && (
<Skeleton
variant="rounded"
width={150}
height={24}
sx={{ borderRadius: "12px" }}
/>
)}
{/* Divider */}
<GiveDivider
sx={{
my: "20px",
bgcolor: "transparent",
borderColor: palette.border?.primary,
}}
/>
<GiveCheckDataRowsSkeleton />
</AnimatedSkeletonsContainer>
</TaskCard>
);
};
export default GiveLatestCheckSectionSkeleton;
|