Skeleton?

앱웹에서 데이터가 로딩중일 때의 인터페이스를 표시해주는 컴포넌트다.

애니메이션이 포함된 인터페이스가 컴포넌트로 구축되어 있다.

How To Use

Import

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

ex1

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

단일 컴포넌트로 사용이 가능하다.

ex2

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

스켈레톤으로 감싸서 내부 요소를 숨길 수 있다.

ex3 - Data Fetching

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

데이터를 fetch할 때 useRemoteData hook을 이용해서 로딩 상태에 따라 사용이 가능하다.

isLoaded에 의해 결정되므로, useState()를 이용해서 단순히 요소를 숨기고 나타내는 토글 버튼을 만들 수도 있다.