skeletons GiveNotificationSkeleton.tsx

100% Statements 4/4

100% Branches 0/0

100% Functions 3/3

100% Lines 4/4

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  
 
 
 
 
10x
10x
 
70x
70x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import Skeleton from "@components/animation/Skeleton";
import { Stack } from "@mui/material";
import { useAppTheme } from "@theme/v2/Provider";
 
function GiveNotificationSkeletonBody() {
  const theme = useAppTheme();
  return (
    <Stack data-testid="give-notification-skeleton" my="10px" width="100%">
      {Array.from({ length: 7 }, (_, i) => i)?.map((idx) => {
        return (
          <Stack
            mt="10px"
            width="100%"
            gap="12px"
            flexDirection="row"
            key={idx}
            borderBottom={`1px solid ${theme.palette.surface?.tertiary}`}
            px="20px"
          >
            <Skeleton
              sx={{
                width: "40px",
                height: "40px",
                minHeight: "40px",
                minWidth: "40px",
              }}
            />
            <Stack my="10px" width="100%" gap="8px">
              <Skeleton
                sx={{
                  width: "40%",
                  height: "12px",
                }}
              />
              <Skeleton
                sx={{
                  width: "70%",
                  height: "12px",
                }}
              />
              <Skeleton
                sx={{
                  width: "10%",
                  height: "12px",
                }}
              />
            </Stack>
          </Stack>
        );
      })}
    </Stack>
  );
}
 
export default GiveNotificationSkeletonBody;