ローディングスケルトン

用途

データ読込み中にコンテンツの形を示すスケルトンパターン。

特徴

• アニメーション
• カスタム形状
• パフォーマンス対策

コード（コピペ用）

// シンプルなスケルトンUI
export function Skeleton({ className = '', w = 'w-full', h = 'h-4' }: { className?: string; w?: string; h?: string }) {
  return <div className={`${w} ${h} bg-zinc-800 rounded animate-pulse ${className}`} />;
}

export function CardSkeleton() {
  return (
    <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6 space-y-3">
      <Skeleton h="h-12" w="w-12" className="rounded-full" />
      <Skeleton h="h-5" w="w-3/4" />
      <Skeleton h="h-3" w="w-1/2" />
      <div className="flex gap-2 pt-2">
        <Skeleton h="h-3" w="w-16" />
        <Skeleton h="h-3" w="w-20" />
      </div>
    </div>
  );
}

export function ListSkeleton({ count = 5 }: { count?: number }) {
  return (
    <div className="space-y-2">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="flex items-center gap-3 p-4 bg-zinc-900 rounded-xl">
          <Skeleton h="h-10" w="w-10" className="rounded-full" />
          <div className="flex-1 space-y-2">
            <Skeleton h="h-4" w="w-1/3" />
            <Skeleton h="h-3" w="w-2/3" />
          </div>
        </div>
      ))}
    </div>
  );
}

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

• 依存パッケージを忘れず追加