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 87 | 2x 2x 56x 140x 2x 28x | import { CampaignType } from "@common/Campaigns/hooks/useReportMenuActions";
import { Box, Skeleton, SkeletonOwnProps, Stack } from "@mui/material";
import { CSSProperties } from "react";
const skeletonDefaultProps: SkeletonOwnProps = {
sx: { borderRadius: "8px" },
variant: "rectangular",
};
const SkeletonGroup = ({
gap,
items,
}: {
gap?: string;
items: {
height: string;
width: string;
extraStyles?: CSSProperties;
}[];
}) => {
return (
<Stack gap={gap || "24px"}>
{items.map((item, index) => (
<Skeleton
key={index}
height={item.height}
width={item.width}
style={{
...(item.extraStyles && item.extraStyles),
}}
{...skeletonDefaultProps}
/>
))}
</Stack>
);
};
const LoadingState = ({ campaign }: { campaign: CampaignType }) => {
return (
<Box padding="20px" data-testid="campaign-panel-loading-spinner">
<SkeletonGroup
items={[
{ height: "240px", width: "100%" },
{ height: "40px", width: "calc(100% - 64px)" },
{
height: "20px",
width: "240px",
extraStyles: { marginTop: "12px" },
},
]}
/>
<Stack padding="40px 0px 16px 0px" justifyContent="flex-start">
<Skeleton height="20px" width="165px" {...skeletonDefaultProps} />
</Stack>
{campaign === "sweepstake" ? (
<SkeletonGroup
items={[
{ height: "168px", width: "100%" },
{ height: "168px", width: "100%" },
{
height: "20px",
width: "165px",
extraStyles: { marginTop: "12px" },
},
{ height: "168px", width: "100%" },
]}
/>
) : (
<>
<SkeletonGroup
items={[
{ height: "168px", width: "100%" },
{ height: "250px", width: "100%" },
]}
/>
<Stack padding="40px 0px 16px 0px" justifyContent="flex-start">
<Skeleton height="20px" width="165px" {...skeletonDefaultProps} />
</Stack>
<Skeleton height="168px" width="100%" {...skeletonDefaultProps} />
</>
)}
</Box>
);
};
export default LoadingState;
|