Skeleton

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

View sourceView theme 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>

<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>

<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} spacing='4' /> </Box>

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

Skeleton color

You can change the animation color with startColor and endColor.

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

<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>

<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} spacing={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> ); }

function Example() {
  const [isLoaded, setIsLoaded] = React.useState(false);
  return (
    <Stack padding={4} spacing={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>
  );
}

Props

colorScheme

Description

Color Schemes for Skeleton are not implemented in the default theme. You can extend the theme to implement them.

Type

string

endColor

Description

The color at the animation end

Type

string

fadeDuration

Description

The fadeIn duration in seconds. Requires isLoaded toggled to true in order to see the transition.

Type

number

Default

0.4

isLoaded

Description

If true, it'll render its children with a nice fade transition

Type

boolean

size

Description

Sizes for Skeleton are not implemented in the default theme. You can extend the theme to implement them.

Type

string

Default

2rem

speed

Description

The animation speed in seconds

Type

number

Default

0.8

startColor

Description

The color at the animation start

Type

string

variant

Description

Variants for Skeleton are not implemented in the default theme. You can extend the theme to implement them.

Type

string