Skeleton

Delay the placeholder, hold it long enough to read, then swap into reserved content.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add skeleton

Usage

Use SkeletonSwap around asynchronous content. Fast responses skip the placeholder; once shown, it stays visible long enough to avoid a flash.

import { SkeletonSwap } from '$lib/sivir/components/skeleton';

<SkeletonSwap ready={profile !== null} lines={3} label="Profile">
  {#if profile}<p>{profile.bio}</p>{/if}
</SkeletonSwap>

Examples

Use the static Skeleton primitive when you need to compose a custom placeholder.

Rectangle

Circle

Card composition

Anatomy

Skeleton - Displays a static loading placeholder.

SkeletonSwap - Swaps a delayed placeholder into reserved content.