Skeletons MobileSkeleton.tsx

0% Statements 0/2

100% Branches 0/0

0% Functions 0/2

0% Lines 0/2

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Skeleton, Stack } from "@mui/material";
 
function MobileSkeleton() {
  return (
    <>
      {Array.from({ length: 7 }, (_, idx) => (
        <Stack key={idx} direction="column" width="100%" gap="8px">
          <Stack
            direction="row"
            alignItems="center"
            justifyContent="space-between"
            flex={1}
            gap="12px"
            width="100%"
          >
            <Skeleton
              variant="rounded"
              width="34px"
              height="34px"
              sx={{ borderRadius: "50px" }}
            />
            <Stack direction="column" flex={1} gap="4px">
              <Skeleton
                variant="rounded"
                sx={{
                  width: "50%",
                  height: "12px",
                  borderRadius: "30px",
                }}
              />
              <Skeleton
                variant="rounded"
                sx={{
                  width: "100%",
                  height: "8px",
                  borderRadius: "30px",
                }}
              />
            </Stack>
          </Stack>
          <Stack direction="row" gap="24px" ml="46px">
            <Skeleton
              variant="rounded"
              sx={{
                width: "54px",
                height: "12px",
                borderRadius: "17.5px",
              }}
            />
            <Skeleton
              variant="rounded"
              sx={{
                width: "54px",
                height: "12px",
                borderRadius: "17.5px",
              }}
            />
          </Stack>
        </Stack>
      ))}
    </>
  );
}
 
export default MobileSkeleton;