Skeleton

Skeleton

콘텐츠를 같은 모양의 자리 표시자로 대체해 로딩 상태를 나타내 주는 컴포넌트예요.

출처: 문서

본문

데이터가 로딩되는 동안 실제 콘텐츠와 비슷한 형태의 스켈레톤 플레이스홀더를 보여 줘요.

<Skeleton>Loading</Skeleton>

이 컴포넌트는 span 요소를 기반으로 하며, 공통 margin props를 지원해요.

예시 (Examples)

Size

width, height prop으로 스켈레톤의 크기를 직접 제어할 수 있어요.

<Skeleton width="48px" height="48px" />

With children

loading prop으로 스켈레톤을 보여 줄지, 아니면 자식 요소를 보여 줄지를 제어할 수 있어요. Skeleton은 자식이 숨겨질 때 자식의 크기를 유지하고, 상호작용 가능한 요소를 비활성화해요.

<Flex gap="4">
  <Skeleton loading={true}>
    <Switch defaultChecked />
  </Skeleton>

  <Skeleton loading={false}>
    <Switch defaultChecked />
  </Skeleton>
</Flex>

With text

Skeleton을 텍스트와 함께 쓸 때는 보통 부모 요소를 감싸기보다 텍스트 노드 자체를 감싸는 편이 좋아요. 그래야 텍스트가 같은 크기의 플레이스홀더로 대체되거든요.

<Container size="1">
  <Flex direction="column" gap="2">
    <Text>
      <Skeleton>Lorem ipsum dolor sit amet.</Skeleton>
    </Text>

    <Skeleton>
      <Text>Lorem ipsum dolor sit amet</Text>
    </Skeleton>
  </Flex>
</Container>

긴 문단을 감쌀 때는 그 차이가 특히 두드러져요.

<Container size="1">
  <Flex direction="column" gap="3">
    <Text>
      <Skeleton>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus,
        efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed,
        aliquet nec magna.
      </Skeleton>
    </Text>

    <Skeleton>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus,
        efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed,
        aliquet nec magna.
      </Text>
    </Skeleton>
  </Flex>
</Container>

더 알아보기 (Learn more)

• 텍스트를 감쌀 때는 텍스트 노드 자체를 Skeleton으로 감싸야 원래 크기와 같은 플레이스홀더가 표시돼요.