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 | 4x | import Skeleton, { DoubledSkeleton } from "@components/animation/Skeleton";
import { Box, Stack } from "@mui/material";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
const EditProductSkeleton = () => {
const { isMobileView } = useCustomTheme();
return (
<Box width="100%">
<Skeleton width={61} height={17} borderRadius={25} />
<Skeleton height={48} borderRadius={8} sx={{ mt: "10px", mb: 1 }} />
<Skeleton height={200} borderRadius={8} />
<Skeleton
height={17}
width={61}
borderRadius={25}
sx={{ mt: "10px", mb: "26px" }}
/>
<Skeleton height={14} width={117} borderRadius={20} />
<Skeleton height={14} borderRadius={25} sx={{ mt: "9px", mb: "6px" }} />
<Skeleton height={14} width={303} borderRadius={20} sx={{ mb: "20px" }} />
<Stack spacing={1} sx={{ ml: isMobileView ? 0 : "48px", mb: 3 }}>
{Array(3)
.fill(0)
.map((_, index) => (
<DoubledSkeleton
key={index}
height={119}
width={119}
frequency={4}
direction="row"
spacing={1.2}
borderRadius="8px"
/>
))}
</Stack>
<Skeleton
height={12}
width={332}
borderRadius={8}
sx={{ margin: "0 auto" }}
/>
<Stack direction="row" spacing={1.5} sx={{ mt: 4 }}>
<Skeleton height={20} width={20} borderRadius={6} />
<Stack spacing={0.5}>
<Skeleton height={12.25} width={168} borderRadius={17.5} />
<Skeleton height={12.25} width={410} borderRadius={17.5} />
<Skeleton height={12.25} width={351} borderRadius={17.5} />
</Stack>
</Stack>
</Box>
);
};
export default EditProductSkeleton;
|