Skeleton
A placeholder in the shape of content that is still loading.
Usage
import { Skeleton } from "@zynactra/ui/skeleton"<Skeleton className="h-4 w-48" />Examples
For skeleton rows next to the empty, error and loaded states of the same list, see Empty: Loading, empty and error.
Guidelines
- Match the real layout: same sizes, same count, same gaps. A skeleton that jumps when content arrives is worse than none.
- Use it for waits over about 300ms. Shorter, show nothing.
- For a whole view or an unknown shape, use Spinner instead.
- Skeletons respect
prefers-reduced-motion.