'use client'
import { HStack, Stack } from '@chakra-ui/react'
import { Skeleton, SkeletonCircle } from '@saas-ui/react'
export const SkeletonBasic = () => {
return (
<HStack gap="5">
<SkeletonCircle size="12" />
<Stack flex="1">
<Skeleton height="5" />
<Skeleton height="5" width="80%" />
</Stack>
</HStack>
)
}
Anatomy
import { Skeleton, SkeletonCircle, SkeletonText } from '@saas-ui/react/skeleton'<SkeletonCircle size="10" />
<SkeletonText noOfLines={2} />
<Skeleton height="200px" />Examples
Feed
Use the Skeleton component to create a feed skeleton.
'use client'
import { HStack, Stack } from '@chakra-ui/react'
import { Skeleton, SkeletonCircle, SkeletonText } from '@saas-ui/react'
export const SkeletonForFeed = () => {
return (
<Stack gap="6" maxW="xs">
<HStack width="full">
<SkeletonCircle size="10" />
<SkeletonText noOfLines={2} />
</HStack>
<Skeleton height="200px" />
</Stack>
)
}
Text
Use the SkeletonText component to create a skeleton for text.
'use client'
import { SkeletonText } from '@saas-ui/react'
export const SkeletonForText = () => {
return <SkeletonText noOfLines={3} gap="4" />
}
With Children
Use the loading prop to show the skeleton while the content is loading.
Select
Select
'use client'
import { Badge, HStack } from '@chakra-ui/react'
import { Skeleton } from '@saas-ui/react'
export const SkeletonWithChildren = () => {
return (
<HStack gap="4">
<Skeleton asChild loading={true}>
<Badge>Select</Badge>
</Skeleton>
<Skeleton loading={false}>
<Badge>Select</Badge>
</Skeleton>
</HStack>
)
}
Variants
Use the variant prop to change the visual style of the Skeleton.
pulse
shine
'use client'
import { HStack, Stack, Text } from '@chakra-ui/react'
import { Skeleton } from '@saas-ui/react'
export const SkeletonWithVariants = () => {
return (
<Stack gap="5">
<HStack gap="5">
<Text width="8ch">pulse</Text>
<Skeleton flex="1" height="5" variant="pulse" />
</HStack>
<HStack gap="5">
<Text width="8ch">shine</Text>
<Skeleton flex="1" height="5" variant="shine" />
</HStack>
</Stack>
)
}
Content Loading
When loading is changed to false, the Skeleton component will fade in.
Chakra UI is cool
'use client'
import { useState } from 'react'
import { Stack, Text } from '@chakra-ui/react'
import { Button, Skeleton } from '@saas-ui/react'
export const SkeletonWithLoaded = () => {
const [loading, setLoading] = useState(true)
return (
<Stack align="flex-start" gap="4">
<Skeleton height="6" loading={loading}>
<Text>Chakra UI is cool</Text>
</Skeleton>
<Button size="sm" onClick={() => setLoading((c) => !c)}>
Toggle
</Button>
</Stack>
)
}
Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
loading | true | 'true' | 'false'The loading of the component |
variant | 'pulse' | 'pulse' | 'shine' | 'none'The variant of the component |