TRA SummitDesign System

Skeleton

Shimmering placeholders that hold layout while transactions and member data load.

Basic shapes

<Skeleton className="h-4 w-48" />
<Skeleton className="h-4 w-72" />
<Skeleton className="h-4 w-32" />

Member card

<div className="rounded-xl border border-line bg-canvas-raised p-5 shadow-sm">
  <div className="flex items-center gap-4">
    <Skeleton className="h-12 w-12 rounded-full" />
    <div className="flex-1 space-y-2">
      <Skeleton className="h-4 w-32" />
      <Skeleton className="h-3 w-24" />
    </div>
  </div>
  <div className="mt-5 space-y-2">
    <Skeleton className="h-3 w-full" />
    <Skeleton className="h-3 w-5/6" />
    <Skeleton className="h-3 w-2/3" />
  </div>
</div>

Transaction rows

<div className="flex items-center gap-4">
  <Skeleton className="h-9 w-9 rounded-full" />
  <div className="flex-1 space-y-2">
    <Skeleton className="h-3.5 w-40" />
    <Skeleton className="h-3 w-24" />
  </div>
  <Skeleton className="h-4 w-16" />
</div>