Skeleton

A shimmer that holds the space content will take, so nothing jumps when it arrives. Stagger the delay to make a list feel like it is filling in rather than flashing.

import { Skeleton } from '@andrewbehma/glass-ui';

Playground

Skeleton.tsx

import { Skeleton } from '@andrewbehma/glass-ui';

<div className="flex w-full max-w-80 gap-3">
  <Skeleton className="size-10 shrink-0 rounded-full" />
  <div className="grid flex-1 gap-2.5 pt-1">
    <Skeleton className="h-3 w-full rounded-full" delay={0} />
    <Skeleton className="h-3 w-11/12 rounded-full" delay={80} />
    <Skeleton className="h-3 w-4/5 rounded-full" delay={160} />
  </div>
</div>