AddonsSkeleton.js
67 lines
| 1 | /** |
| 2 | * External Dependencies |
| 3 | */ |
| 4 | import { Box, Flex, Skeleton, SkeletonText, VStack } from "@chakra-ui/react"; |
| 5 | import React from "react"; |
| 6 | import { Col, Row } from "react-grid-system"; |
| 7 | |
| 8 | const AddonsSkeleton = () => { |
| 9 | return ( |
| 10 | <Row> |
| 11 | {Array(12) |
| 12 | .fill(1) |
| 13 | .map((_, i) => ( |
| 14 | <Col |
| 15 | style={{ marginBottom: 30 }} |
| 16 | md={3} |
| 17 | key={Date.now() + Math.random()} |
| 18 | > |
| 19 | <Box |
| 20 | borderColor="gray.100" |
| 21 | rounded="sm" |
| 22 | bg="white" |
| 23 | mb="30px" |
| 24 | shadow="sm" |
| 25 | minH="xs" |
| 26 | > |
| 27 | <VStack direction="row" gap={2}> |
| 28 | <Skeleton h="10rem" width={"100%"} /> |
| 29 | |
| 30 | <Box px={5} py={6} width={"100%"}> |
| 31 | <VStack direction={"row"} gap={5}> |
| 32 | <Flex |
| 33 | gap={2} |
| 34 | justifyContent={"space-evenly"} |
| 35 | alignItems={"center"} |
| 36 | width={"100%"} |
| 37 | > |
| 38 | <Skeleton |
| 39 | width={"1rem"} |
| 40 | height={"1rem"} |
| 41 | /> |
| 42 | <SkeletonText |
| 43 | width={"100%"} |
| 44 | noOfLines={2} |
| 45 | /> |
| 46 | <Skeleton |
| 47 | width={"2rem"} |
| 48 | height={"1rem"} |
| 49 | /> |
| 50 | </Flex> |
| 51 | <Skeleton h="2rem" width={"100%"} /> |
| 52 | <SkeletonText |
| 53 | width={"100%"} |
| 54 | noOfLines={3} |
| 55 | /> |
| 56 | </VStack> |
| 57 | </Box> |
| 58 | </VStack> |
| 59 | </Box> |
| 60 | </Col> |
| 61 | ))} |
| 62 | </Row> |
| 63 | ); |
| 64 | }; |
| 65 | |
| 66 | export default AddonsSkeleton; |
| 67 |