Skeleton

아직 불러오지 않은 것의 형태입니다. 실제 내용이 차지할 자리를 미리 잡아 두므로, 이미지가 도착했다고 해서 읽고 있던 카드가 갑자기 200px 자라지 않습니다.

import { Skeleton } from 'neba';

<Skeleton shape="circle" size="lg" />
<Skeleton shape="rect" height={120} />
<Skeleton lines={3} />

Props

Prop	타입	기본값	설명
shape	'line' | 'rect' | 'circle'	'line'	무엇을 대신하는지, 글줄, 블록(이미지·차트·카드), 원형(avatar)
lines	number	1	shape="line"에서 그릴 줄 수. 마지막 줄은 문단의 마지막 줄처럼 짧게 그려집니다. 다른 shape에서는 무시됩니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	대신하는 것의 크기, line은 타입 스케일, circle은 지름, rect는 기본 블록 높이
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'secondary'	색 계열. 그대로 두는 편이 좋습니다. 아직 도착하지 않은 내용에 대해 의미론적 색을 입히는 것은 없는 것을 말하는 셈입니다
width	number | string	—	명시적 너비. 숫자는 픽셀입니다
height	number | string	—	명시적 높이. 숫자는 픽셀입니다
animated	boolean	true	지나가는 하이라이트. 축소된 모션 설정은 묻지 않고도 색 맥동으로 바꾸므로, 이것은 접근성 스위치가 아닙니다
label	string	—	스크린 리더가 읽는 문장. 비워 두면 aria-hidden입니다. 한 영역을 대표하는 하나에만 붙이면 그것이 status가 됩니다
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<span />}). Base UI의 render prop 그대로

<div>의 기본 속성은 그대로 전달되며, render로 요소를 바꿀 수 있습니다. 공통 축은 prop 규칙에서 설명합니다.

예시

shape

세 가지 shape은 레이아웃을 이루는 세 가지입니다. line은 글줄이며 타입 스케일에 맞춰 크기가 정해지므로 md 줄은 md 글자와 같은 높이입니다. rect는 블록(이미지, 차트, 카드)이고 height를 주지 않으면 썸네일 높이로 떨어집니다. circle은 Avatar와 같은 사다리 위에서 그려지므로 같은 size에서 정확히 같은 크기입니다.

import { Skeleton } from 'neba';

export default function SkeletonShapes() {
  return (
    <div className="flex w-full max-w-96 flex-col gap-5">
      <div className="flex flex-col gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">line</span>
        <Skeleton />
      </div>

      <div className="flex flex-col gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">rect</span>
        <Skeleton shape="rect" />
      </div>

      <div className="flex flex-col gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">circle</span>
        <Skeleton shape="circle" size="xl" />
      </div>
    </div>
  );
}

lines

lines는 타입 스케일의 행간을 사이에 두고 막대를 쌓으며, 마지막 줄은 문단의 마지막 줄처럼 짧게 그립니다. shape="line"에만 적용되고 나머지 둘에서는 무시됩니다.

import { Skeleton } from 'neba';

export default function SkeletonLines() {
  return (
    <div className="flex w-full max-w-96 flex-col gap-6">
      <Skeleton size="sm" lines={2} />
      <Skeleton lines={4} />
      <Skeleton size="lg" lines={3} />
    </div>
  );
}

width와 height

width와 height는 숫자를 픽셀로, 문자열을 CSS 길이로 받습니다. 줄은 따로 말하지 않는 한 전체 너비를 차지하므로, 제목 자리 표시자는 width 하나 차이입니다.

import { useState } from 'react';
import { Button, Card, Skeleton, Statistic } from 'neba';

export default function SkeletonSwapping() {
  const [loading, setLoading] = useState(true);

  return (
    <div className="flex w-full max-w-96 flex-col gap-3">
      <Card>
        {loading ? (
          <Skeleton shape="rect" height={64} label="Loading this month's usage" />
        ) : (
          <Statistic label="Requests this month" value={1284910} previousValue={1142380} />
        )}
      </Card>

      <Button size="sm" variant="outline" onClick={() => setLoading((value) => !value)}>
        {loading ? 'Finish loading' : 'Load again'}
      </Button>
    </div>
  );
}

animated

animated는 자리 표시자 위를 지나가는 하이라이트입니다. 한 화면에 수십 개가 놓이거나, 기다림이 길어 움직임이 소음이 되는 곳에서는 끄세요.

<Skeleton animated={false} lines={4} />

이것은 접근성 스위치가 아닙니다. 축소된 모션 설정은 묻지 않고도 이미 이 하이라이트를 색 맥동으로 바꿉니다.

접근성

• Skeleton은 기본적으로 aria-hidden입니다. 자리 표시자 열둘이 저마다 자기를 알리는 것보다 침묵이 낫습니다.
• 한 영역 전체를 대표하는 하나에만 label을 주면 그 이름과 aria-busy를 가진 status가 됩니다. 쌓인 막대마다 label을 붙이지 마세요.
• 레이아웃을 이미 알고 있다면 spinner보다 skeleton을 쓰세요. 내용이 도착할 때 페이지가 다시 흐르지 않게 해 주는 로딩 표시는 이것뿐입니다.