Skeleton

中身と同じ形をした読み込み中の箱。

あとから入る中身と同じ形の箱を、読み込み中に置いておくためのものです。 Loading の全画面スピナーと違い、レイアウトを保ったまま待てます。

export const client = "only";

import { Skeleton } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="w-80 space-y-3 rounded-xl border p-4">
      <Skeleton className="h-5 w-32" />
      <Skeleton className="h-9 w-40" />
      <div className="space-y-2 pt-2">
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-3/4" />
      </div>
    </div>
  );
}

import { Skeleton } from "@squadbase/vantage/ui";

大きさは className で決めます（h-4 w-32 のように）。実際に入る要素と同じ高さにしておくと、読み込み完了時に画面が跳ねません。

ダッシュボードのタイルには、同じ形をあらかじめ組んである DashboardCardSkeleton が使えます。