Suspense Reveal Queue

包住多個載入區塊的揭示指揮器，先完成者進佇列，依作者順序與最小間隔依序揭示，遲到區塊自動接補位。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

揭示間隔（毫秒）interval

200

無障礙標籤aria-label

<SuspenseRevealQueue />

安裝

npx shadcn@latest add https://webberui.com/r/suspense-reveal-queue.json

或在 components.json 設定 registries 後，改用 @webberui/suspense-reveal-queue 安裝。

安裝依賴後，從 registry JSON（/r/suspense-reveal-queue.json 的 files[0].content）複製 suspense-reveal-queue.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

使用

SuspenseRevealQueue 是指揮器，內部放入若干 RevealSlot。每個 slot 就緒後不會立刻 pop-in，而是進入佇列，依 order 與 interval 由指揮器統一排程揭示。

受控就緒（搭配自有載入狀態）

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>

自動模式（包住 Suspense 邊界）

省略 ready 時，RevealSlot 會自行以 React.Suspense 包住 children，並在 children 解析掛載時判定就緒——你只需把會 suspend 的元件直接放進去：

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

Props

`SuspenseRevealQueue`

Prop	型別	預設值	說明
`interval`	`number`	`200`	相鄰兩次揭示之間的最小間隔（毫秒）
`onRevealComplete`	`() => void`	—	全部 slot 揭示完成時觸發一次
`aria-label`	`string`	—	套用在佇列容器上的無障礙標籤
`children`	`ReactNode`	—	放入若干 `RevealSlot`
`className`	`string`	—	附加在容器上的 class

`RevealSlot`

Prop	型別	預設值	說明
`order`	`number`	註冊順序	揭示序（0 起算，越小越早）；省略時依 DOM 由上到下自動編號
`fallback`	`ReactNode`	—	載入骨架，內容揭示前顯示、揭示時淡出
`ready`	`boolean`	—	受控就緒旗標；省略時改為自動模式（內建 `Suspense`）
`children`	`ReactNode`	—	就緒後的真實內容
`className`	`string`	—	附加在 slot 容器上的 class

運作方式

進佇列：任一區塊就緒（ready 轉 true，或自動模式下 Suspense 解析完成）即進入佇列。
依序揭示：指揮器每次只揭示一個區塊，兩次揭示至少間隔 interval 毫秒；候選為「尚未揭示且已就緒」中 order 最小者。
不空等：若序位在前的區塊尚未就緒，指揮器不會卡住，會先揭示已就緒的後續區塊。
自動接補位：被超車的遲到區塊就緒後立即補上，並改用回彈（spring）動畫標示「追趕」，與正常揭示的平滑淡入區隔。

可及性

容器帶 role="group"；尚未全部揭示前標記 aria-busy，可接 aria-label 說明區域用途。
骨架標記 aria-hidden，不會被輔助科技朗讀。
未揭示的內容以 aria-hidden 與 inert 隔離，避免被朗讀或以鍵盤聚焦到尚未顯示的區塊。
使用者系統開啟「減少動態效果」時，取消節奏鋪陳與位移／模糊，已就緒的區塊直接淡入呈現。

Suspense Reveal Queue

On this page