Feedback

Skeleton

Content-shaped loading placeholders — text lines, circles, or rectangular blocks — plus a SkeletonWrapper for toggling between a skeleton and real content.

SkeletonSkeletonWrapper

Preview

Usage

tsx

import { Skeleton, SkeletonWrapper, Avatar } from "@vesture/react";

<Skeleton variant="text" lines={3} />

<SkeletonWrapper loading={loading} skeleton={<Skeleton variant="circular" />}>
  <Avatar name="Jane Doe" />
</SkeletonWrapper>

Behavior

variant="text" with lines > 1 renders that many stacked lines, with the last line narrower so it reads as wrapped paragraph text rather than uniform bars.
variant="circular" defaults to Avatar's md size (40px) since it's most commonly used as an avatar placeholder.
animation defaults to a shimmer sweep; pulse and none are also available, and both fall back to a static treatment under prefers-reduced-motion.
SkeletonWrapper renders its skeleton prop while loading is true, and children once false — a thin convenience over conditionally rendering either yourself.

Props

Skeleton

Prop	Type	Default	Description
variant	"text" \| "circular" \| "rectangular"	"text"	Shape of the placeholder.
width	number \| string	—	CSS width; a number is treated as pixels.
height	number \| string	—	CSS height; a number is treated as pixels.
lines	number	1	Number of stacked lines. Only meaningful for variant="text".
animation	"shimmer" \| "pulse" \| "none"	"shimmer"	Loading animation.

SkeletonWrapper

Prop	Type	Default	Description
loading	boolean	—	Required. Shows skeleton while true, children while false.
skeleton	ReactNode	—	Required. Rendered while loading.
children	ReactNode	—	Rendered once loading is false.