Skeleton

A sleek ghost-loading component that prevents layout shift by mimicking your UI’s geometry. It uses animate-pulse to simulate content hierarchy—avatars, titles, and text blocks—maintaining a polished, high-end aesthetic while data is in transit.

components/ui/skeleton.tsx
export function CardSkeleton() {
  return (
    <div className="space-y-4 animate-pulse">
      <div className="p-8 rounded-[2.5rem] border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-950/50">
        <div className="flex items-center gap-3 mb-6">
          <div className="w-10 h-10 rounded-full bg-zinc-200 dark:bg-zinc-800" />
          <div className="space-y-2">
            <div className="w-24 h-3 bg-zinc-200 dark:bg-zinc-800 rounded-full" />
            <div className="w-16 h-2 bg-zinc-50 dark:bg-zinc-800/50 rounded-full" />
          </div>
        </div>
        <div className="w-3/4 h-6 bg-zinc-200 dark:bg-zinc-800 rounded-xl mb-4" />
        <div className="w-full h-20 bg-zinc-100 dark:bg-zinc-800/80 rounded-2xl" />
      </div>
    </div>
  );
}