Suspense Reveal Queue: React + Tailwind Component

A reveal conductor wrapping several loading sections — whichever finishes first joins the queue, reveals follow the author's order with a minimum interval, and late sections catch up automatically.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/suspense-reveal-queue.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

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

Reveal interval (ms)interval

200

Accessible labelaria-label

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<SuspenseRevealQueue/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

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