스켈레톤

데이터가 로딩되는 동안 실제 콘텐츠의 형태를 미리 보여주는 플레이스홀더다. 스피너처럼 막연한 대기감을 주기보다, 곧 나타날 화면 구조를 암시해 체감 속도를 높인다. 컴포넌트 자체는 색·애니메이션만 제공하고, 폭·높이·반경은 className 으로 실제 콘텐츠에 맞춘다.

활용 방법

텍스트 블록

제목·설명처럼 줄 단위 텍스트가 들어올 위치를 표시한다.

Preview

tsx

<Skeleton className="h-5 w-32" />
<Skeleton className="mt-2 h-3 w-full" />
<Skeleton className="mt-1.5 h-3 w-4/5" />

카드

아이콘·타이틀·값이 있는 대시보드 카드 형태를 흉내낸다.

Preview

tsx

<div className="rounded-xl border border-border bg-surface p-4">
  <Skeleton className="h-9 w-9 rounded-lg" />
  <Skeleton className="h-3 w-20" />
  <Skeleton className="h-6 w-16" />
  <Skeleton className="h-2 w-full rounded-full" />
</div>

리스트

목록 로딩은 실제 행 개수와 비슷하게 반복한다. 너무 많은 줄은 피하고 첫 화면에 보이는 양만 둔다.

Preview

tsx

{rows.map((row) => (
  <div className="flex items-center gap-3 p-3" key={row}>
    <Skeleton className="h-8 w-8 rounded-full" />
    <Skeleton className="h-3.5 w-32" />
    <Skeleton className="h-5 w-12 rounded-full" />
  </div>
))}

사용 지침

· 실제로 데이터가 곧 들어올 영역에만 쓴다. 빈 상태나 오류 상태 대신 쓰지 않는다.
· 최종 콘텐츠와 비슷한 폭·높이·반경을 준다. 막대만 길게 늘어놓으면 정보 구조가 흐려진다.
· 첫 화면에 보이는 양만 만든다. 과한 스켈레톤 반복은 오히려 복잡해 보인다.

속성

이름	타입	기본값	설명
className	string	-	크기·반경·간격 등 실제 콘텐츠 형태를 맞추는 클래스