Skeleton 載入佔位

首次載入時，用灰塊佔住真實版面的形狀。

卡片的載入佔位（左：載入中 → 右：載入完成）

乙

乙單位

最近更新：今天 09:40

本期共 128 筆紀錄，其中 12 筆待確認；金額合計與上期持平。

在 Storybook 開啟 ↗

規範

✅ 這樣做

骨架保留真實版面的高度與形狀——載入完成的瞬間版面不跳動。 這是骨架存在的唯一理由。

🚫 不要這樣

不要隨手丟三根等寬灰條。跟真實內容對不上的骨架， 載入完成時整頁跳一下，比「載入中…」文字更糟。

✅ 這樣做

只用於首次載入。

🚫 不要這樣

重新整理既有畫面時不要換回骨架——把使用者看得好好的資料閃成灰塊， 等於把「更新」演成「壞掉」。保留舊內容，資料到了再換。

無障礙與動態

• 骨架本身 aria-hidden；載入語意掛在容器的 aria-busy="true" 上，完成後移除。 讀屏使用者不需要逐根聽到灰條。
• 脈動尊重 prefers-reduced-motion（motion-reduce:animate-none）—— 靜止的灰塊已足以表達「這裡還沒好」。

取用

npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/skeleton.json

Skeleton 是形狀自訂的單塊（尺寸全由 class 決定）；SkeletonText 是 n 行文字段落 （末行 60% 寬——等寬到底的假段落一眼就假）。