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 | 12x | import FadeUpWrapper from "@components/animation/FadeUpWrapper";
import { Grid, Skeleton } from "@mui/material";
import { Box } from "@mui/material";
export const PreviewDonationSkeletonLoader = () => {
return (
<Grid
container
justifyContent="center"
alignItems="flex-start"
sx={{
gap: 2,
padding: "20px",
}}
>
<FadeUpWrapper x={0} delay={300}>
<Box
sx={{
display: "flex",
gap: 2,
flexDirection: "column",
width: "65%",
justifyContent: "center",
}}
>
<Skeleton
variant="rectangular"
width="100%"
height={400}
sx={{ borderRadius: "12px" }}
/>
<Box>
<Skeleton
variant="text"
sx={{
width: "100%",
height: 32,
borderRadius: "45px",
marginBottom: "16px",
}}
/>
<Skeleton
variant="text"
sx={{ width: "100%", height: 14, borderRadius: "17.5px" }}
/>
<Skeleton
variant="text"
sx={{ width: "100%", height: 14, borderRadius: "17.5px" }}
/>
</Box>
</Box>
</FadeUpWrapper>
<FadeUpWrapper x={0} delay={500}>
{/* Second row */}
<Box sx={{ display: "flex", width: "33%" }}>
<Skeleton
variant="rectangular"
width="100%"
height={700}
sx={{ borderRadius: "12px" }}
/>
</Box>
</FadeUpWrapper>
</Grid>
);
};
|