Suspense Reveal Queue

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<SuspenseRevealQueue />

Installation

Usage

SuspenseRevealQueue is the conductor, and you put several RevealSlot elements inside it. A slot does not pop in the moment it is ready — it joins the queue, and the conductor schedules every reveal centrally according to order and interval.

Controlled readiness (with your own loading state)

import {
  RevealSlot,
  SuspenseRevealQueue,
} from "@/components/ui/suspense-reveal-queue";

<SuspenseRevealQueue interval={200}>
  <RevealSlot order={0} ready={!profile.loading} fallback={<ProfileSkeleton />}>
    <Profile data={profile.data} />
  </RevealSlot>
  <RevealSlot order={1} ready={!chart.loading} fallback={<ChartSkeleton />}>
    <Chart data={chart.data} />
  </RevealSlot>
  <RevealSlot order={2} ready={!feed.loading} fallback={<FeedSkeleton />}>
    <Feed data={feed.data} />
  </RevealSlot>
</SuspenseRevealQueue>

Automatic mode (wrapping a Suspense boundary)

When ready is omitted, RevealSlot wraps its children in React.Suspense on its own and counts them as ready once they resolve and mount — you just drop the suspending component straight in:

<SuspenseRevealQueue interval={200}>
  <RevealSlot order={0} fallback={<ProfileSkeleton />}>
    <AsyncProfile />
  </RevealSlot>
  <RevealSlot order={1} fallback={<ChartSkeleton />}>
    <AsyncChart />
  </RevealSlot>
</SuspenseRevealQueue>

Props

SuspenseRevealQueue

RevealSlot

How it works

• Joining the queue: any section joins the queue as soon as it is ready (ready flips to true, or in automatic mode Suspense resolves).
• Revealing in order: the conductor reveals only one section at a time, with at least interval milliseconds between two reveals; the candidate is whichever has the lowest order among the "not yet revealed and already ready" sections.
• No idle waiting: if a section earlier in the order is not ready yet, the conductor does not stall — it reveals the later sections that are ready first.
• Automatic catch-up: an overtaken late section is added the moment it is ready, using a spring animation to signal "catching up", which distinguishes it from the smooth fade of a normal reveal.

Accessibility

• The container carries role="group" and is marked aria-busy until everything has been revealed; you can add an aria-label explaining the purpose of the region.
• Skeletons are marked aria-hidden so assistive technology never reads them.
• Unrevealed content is isolated with aria-hidden and inert, so a section that is not yet shown cannot be read out or reached by keyboard focus.
• When the user has "reduce motion" enabled at the system level, the paced choreography along with the displacement／blur are dropped and every ready section simply fades in.