Skeleton

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

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

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

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

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

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

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

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