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 | 7x 35x 6x 35x | import { Box, Skeleton } from "@mui/material";
function ChatConversationsSkeleton({ count = 5 }) {
return (
<Box
data-testid="give-conversation-message-skeleton"
display="flex"
flexDirection="column"
gap={3}
>
{Array.from({ length: count }).map((_, idx) => (
<ChatBubbleSkeleton key={idx} isSender={idx % 2 === 0} />
))}
</Box>
);
}
const ChatBubbleSkeleton = ({ isSender }: { isSender: boolean }) => {
return (
<Box
display="flex"
justifyContent={isSender ? "flex-end" : "flex-start"}
px={2}
width="100%"
>
<Box
display="flex"
flexDirection={isSender ? "row-reverse" : "row"}
alignItems="flex-end"
gap={1.5}
>
<Skeleton variant="circular" width="35px" height="35px" />
<Box
bgcolor="grey.100"
color="white"
p="8px 12px"
borderRadius={isSender ? "8px 8px 0 8px" : "8px 8px 8px 0"}
width="200px"
>
<Skeleton
variant="rounded"
height="12px"
width="80%"
sx={{
borderRadius: "16px",
}}
/>
<Skeleton
variant="rounded"
width="60%"
height="12px"
sx={{ mt: 1, borderRadius: "16px" }}
/>
<Skeleton
width="20%"
height="12px"
variant="rounded"
sx={{
mt: 1,
borderRadius: "16px",
}}
/>
</Box>
</Box>
</Box>
);
};
export default ChatConversationsSkeleton;
|