All files / src/components/CustomSkeletons ConversationsSkeleton.tsx

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
 
 
 
7x
 
 
 
 
 
 
 
 
35x
 
 
 
 
 
3x
35x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Box, Skeleton, Stack } from "@mui/material";
 
function ConversationsSkeleton({ count = 5 }) {
  return (
    <Box
      display="flex"
      flexDirection="column"
      data-testid="conversations-skeleton"
    >
      {Array(count)
        .fill("")
        .map((_, idx) => (
          <CollapsableSkeleton key={idx} />
        ))}
    </Box>
  );
}
 
const CollapsableSkeleton = () => {
  return (
    <Box display="flex" flexDirection="column" width="100%">
      <Box
        display="flex"
        alignItems="center"
        paddingBlock="16px"
        gap={3}
        mx="16px"
      >
        <Skeleton
          width="40px"
          height="40px"
          variant="circular"
          sx={{
            borderRadius: "50%",
          }}
        />
        <Stack gap="12px" width="90%">
          <Skeleton
            width="58%"
            height="12px"
            variant="rounded"
            sx={{
              borderRadius: "16px",
            }}
          />
          <Skeleton
            width="100%"
            height="12px"
            variant="rounded"
            sx={{
              borderRadius: "16px",
            }}
          />
          <Skeleton
            width="20%"
            height="12px"
            variant="rounded"
            sx={{
              borderRadius: "16px",
            }}
          />
        </Stack>
      </Box>
      <Skeleton width="100%" height="1px" variant="rectangular" />
    </Box>
  );
};
 
export default ConversationsSkeleton;