Skeleton Screen

骨架屏

01你是不是遇到這個 / THE SYMPTOM

資料還在載入的時候，畫面整片空白、或只放一個轉圈圈，看起來很久、很像當掉。我想要在資料還沒來之前，先顯示一個跟最終版面長得差不多的灰色佔位框，讓人覺得快要好了。

↑ 如果你點頭了，你要的關鍵字就是 Skeleton Screen。

02這是什麼 / DEFINITION

在內容載入完成前，先顯示一組模仿最終版面形狀的灰色佔位區塊（常帶微光動畫），取代空白或單純的轉圈圈 loading。

03什麼時候用 / WHEN TO USE

列表、卡片、個人頁、Feed 這種版面結構固定、但資料要等 API 回來的頁面，想降低等待的焦慮感、減少版面跳動。

04怎麼跟 AI 說 / HOW TO ASK

直接複製這句、貼進 Claude Code / Cursor / Copilot / ChatGPT：

幫我替這個文章列表加上 skeleton screen（骨架屏）：資料載入中時顯示和卡片同形狀的灰色佔位區塊加 shimmer 動畫，載入完成後再換成真實內容。

05常見坑 / WATCH OUT

⚠ 別跟單純的 spinner（轉圈圈）混為一談——骨架屏的重點是「形狀貼近真實版面」才有效。骨架要和真實內容尺寸接近，否則資料一到畫面會大跳一下（layout shift）。

06相關的詞 / RELATED

我按愛心 / 按讚 / 加入購物車的時候，畫面要等伺服器回應才會變，整個卡卡的、要等一兩秒。我想要一按下去畫面馬上反應，像沒在等網路一樣；如果後端真的失敗了再退回去就好。

我用 Next.js / SSR，頁面一打開內容先出來、但按鈕點了沒反應，要等個半秒一秒才能互動；有時 console 還跳「內容對不起來」的警告，畫面閃一下。我想知道這個「伺服器先給靜態 HTML、再讓 JS 接手變可互動」的過程叫什麼。