import { Skeleton, Stack } from '@fidely-ui/react'
export const SkeletonBasic = () => {
return (
<Stack gap={3}>
{[1, 3, 4].map((d) => (
<Skeleton key={d} height={'25px'} />
))}
</Stack>
)
}
Usage
import { Skeleton, SkeletonText } from '@fidely-ui/react'<Stack gap="6" maxW="xs">
<Skeleton height="200px" />
<Skeleton height="200px" />
<Skeleton height="200px" />
</Stack>With Card
import { Card, Flex, Skeleton, Stack } from '@fidely-ui/react'
export const SkeletonCard = () => {
return (
<Card.Root>
<Card.Body>
<Stack gap="4">
<Stack p="1.5">
<Skeleton height="24px" width="140px" rounded="md" />
</Stack>
<Stack px="1.5">
<Skeleton height="20px" width="70%" mb="2" />
<Skeleton height="14px" width="100%" mb="1" />
<Skeleton height="14px" width="90%" />
</Stack>
<Flex gap="1.5" p="1.5">
<Skeleton height="22px" width="72px" rounded="full" />
<Skeleton height="22px" width="72px" rounded="full" />
</Flex>
</Stack>
</Card.Body>
</Card.Root>
)
}
import { Card, Flex, Skeleton, Stack } from '@fidely-ui/react'
export const SkeletonProfileCard = () => {
return (
<Card.Root maxW="sm">
<Card.Body>
<Flex gap="4" align="center">
{/* avatar */}
<Skeleton boxSize="12" rounded="full" />
{/* name + meta */}
<Stack flex="1" gap="2">
<Skeleton height="16px" width="120px" />
<Skeleton height="12px" width="80px" />
</Stack>
{/* action */}
<Skeleton height="28px" width="72px" rounded="md" />
</Flex>
</Card.Body>
</Card.Root>
)
}