Skeleton

콘텐츠가 로딩되는 동안 표시되는 플레이스홀더

Basic Usage

콘텐츠 로딩 중 레이아웃을 유지하며 로딩 상태를 표시합니다.

tsx

<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
<Skeleton className="h-4 w-[150px]" />

Card Skeleton

카드 형태의 스켈레톤을 구성할 수 있습니다.

tsx

<div className="flex items-center space-x-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[200px]" />
    <Skeleton className="h-4 w-[150px]" />
  </div>
</div>

Usage

tsx

import { Skeleton } from '@gpters-internal/ui';

function LoadingCard() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[200px]" />
        <Skeleton className="h-4 w-[150px]" />
      </div>
    </div>
  );
}