Skeleton

Skeleton is used to display the loading state of some component.

SourceTheme Source@chakra-ui/skeleton

Import#

import { Skeleton, SkeletonCircle, SkeletonText } from '@chakra-ui/react'

Usage#

You can use it as a standalone component.

<Stack>
<Skeleton height='20px' />
<Skeleton height='20px' />
<Skeleton height='20px' />
</Stack>

Or to wrap another component to take the same height and width.

<Skeleton>
<div>contents wrapped</div>
<div>won't be visible</div>
</Skeleton>

Useful when fetching remote data.

import { Box } from '@chakra-ui/react'
function Card() {
const { data, loading, error } = useRemoteData()
if (error) return <Box children='error' />
return (
<Box>
<Skeleton isLoaded={!loading}>
<Heading>{data.title}</Heading>
</Skeleton>
</Box>
)
}

Circle and Text Skeleton#

<Box padding='6' boxShadow='lg' bg='white'>
<SkeletonCircle size='10' />
<SkeletonText mt='4' noOfLines={4} gap='4' skeletonHeight='2' />
</Box>

Skeleton color#

You can change the animation color with startColor and endColor.

<Skeleton startColor='pink.500' endColor='orange.500' height='20px' />

Skipping the skeleton when content is loaded#

You can prevent the skeleton from rendering using the isLoaded prop.

<Skeleton isLoaded>
<span>Chakra ui is cool</span>
</Skeleton>

fadeDuration with isLoaded#

With the fadeDuration prop, you can control the duration of the content fading into view. The value in this prop is a number representing seconds which is part of the animation style prop that is rendered to the component. Default value is 0.4 seconds.

This requires the isLoaded prop, and the animation is best visible when the isLoaded prop is toggled to true.

function Example() {
const [isLoaded, setIsLoaded] = React.useState(false)
return (
<Stack padding={4} gap={1}>
<Skeleton height='40px' isLoaded={isLoaded}>
<Box>Hello World!</Box>
</Skeleton>
<Skeleton
height='40px'
isLoaded={isLoaded}
bg='green.500'
color='white'
fadeDuration={1}
>
<Box>Hello React!</Box>
</Skeleton>
<Skeleton
height='40px'
isLoaded={isLoaded}
fadeDuration={4}
bg='blue.500'
color='white'
>
<Box>Hello ChakraUI!</Box>
</Skeleton>
<Box textAlign='center'>
<Button onClick={() => setIsLoaded((v) => !v)}>toggle</Button>
</Box>
</Stack>
)
}
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel