Pesto UI

Reveal

The skeleton-to-content crossfade as a wrapper. Both layers share one grid cell, so the box already has its finished height while the placeholder is up and nothing reflows when the data lands.

tsx
import { Reveal, Skeleton } from "@pestoui/core"

Loading to ready

While loading is true the content is rendered but inert and hidden from assistive tech. When it flips, the placeholder fades out, the content rises in, and loadedLabel is announced once.

Guest Concierge
2,540 runs · 99.2% success

Props

PropTypeDefaultDescription
loadingboolean—Required. While true the placeholder shows, the content is inert and the root carries aria-busy.
skeletonReactNode—Required. The placeholder, sized to the content it stands in for. It stays mounted after the reveal, so a taller one holds the box open.
loadedLabelstring"Content loaded"Announced politely, once, when the content arrives. Name the thing that landed.
childrenReactNode—The real content. Rendered from the first frame so the container has its final height.
classNamestring—On the root, alongside the reveal-stack class that stacks the two layers.
PreviousResizableNext Scroll Area

Pesto UI · 117 documented components