Skeleton

A grey placeholder where content will appear.

SourcePackage @weft-js/warpPlayground

Preview

tsx

import { Skeleton, Stack } from '@weft-js/warp'export function Shapes() {  return (    <Stack gap="group">      <Skeleton />      <Skeleton shape="circle" width="48px" height="48px" />      <Skeleton shape="block" height="96px" />    </Stack>  )}

Installation

npm install @weft-js/warp

Usage

tsx

import { Skeleton } from '@weft-js/warp'<Stack gap="group">  <Skeleton />  <Skeleton shape="circle" width="48px" height="48px" />  <Skeleton shape="block" height="96px" /></Stack>

Lines

lines stacks text lines. The last is shorter.

tsx

import { Skeleton, Stack } from '@weft-js/warp'export function Lines() {  return (    <Stack gap="tight"><Skeleton lines={4} /></Stack>  )}

A person row

Use shape and width to sketch a person row while it loads.

tsx

import { Row, Skeleton, Stack } from '@weft-js/warp'export function Profile() {  return (    <Row gap="related" align="start">      <Skeleton shape="circle" width="40px" height="40px" />      <Stack gap="tight">        <Skeleton width="10rem" />        <Skeleton width="16rem" />      </Stack>    </Row>  )}

Then the content

Match the content's size, so nothing jumps.

tsx

import { onCleanup, state } from '@weft-js/core'import { Card, Skeleton, Stack, Text } from '@weft-js/warp'export function ThenContent() {  const ready = state(false)  const timer = setTimeout(() => (ready.value = true), 1800)  onCleanup(() => clearTimeout(timer))  return (    <Card>      {ready.value        ? <Stack gap="tight"><Text role="heading">checkout</Text><Text subtle>Add Apple Pay to the last step, by Tomás. Live in eu-west.</Text></Stack>        : <Stack gap="tight"><Skeleton width="40%" /><Skeleton lines={2} /></Stack>}    </Card>  )}

When to use

Use it for

Building your own loading state, piece by piece

Reach for something else

Shape, when the content is a plain list, card or table
Spinner, when you don't know the shape of what is coming

Playground

Shape

textcircleblock

Lines3

Width

Height

import { Skeleton } from '@weft-js/warp'<Skeleton lines={3} />

Accessibility

Skeletons say nothing to screen readers. Put aria-busy on the region, or use Shape, which does it for you.
Under reduced motion they stay still.

API Reference

Prop	Type	Default	Description
`shape`	`"circle" \| "text" \| "block"`	`'text'`	`text`, `circle` or `block`.
`lines`	`number`	`1`	How many text lines.
`width`	`string`	—	Any CSS length.
`height`	`string`	—	Any CSS length.

RelatedShape Spinner