如果你寫過前端，一定懂這種痛：每次做加載骨架屏，都要對著設(shè)計稿手調(diào)一堆灰色方塊，改個圓角、對個間距，半天就過去了。更煩的是，真實內(nèi)容加載出來后，布局經(jīng)常還會跳一下。

開發(fā)者Sean Roberts也受夠了。他寫了一個叫shimmer-trace的React庫，思路很直接——讓代碼自己去看真實UI長什么樣，然后自動描邊生成骨架屏。

用法極簡。把整個組件包進標簽，傳個loading狀態(tài)，完事。不需要手寫，不需要堆灰色div，庫會遍歷真實的DOM節(jié)點，量出每個文字塊和圖片的位置尺寸，生成形狀完全一致的骨架塊。

關(guān)鍵設(shè)計在四個地方。加載時，真實子元素用visibility: hidden藏起來——DOM還在，瀏覽器照樣算布局，按鈕該占多大還占多大，但什么都不畫出來。這樣骨架屏和真實UI像素級重合，累積布局偏移（CLS）直接歸零。

一個叫useTrace的hook用getBoundingClientRect遍歷容器，抓下每個葉子元素的位置和圓角，存成矩形列表。ResizeObserver盯著窗口變化，一resize就重新描一遍。

嵌套也處理了。多層不會各自畫覆蓋層，而是通過React Context往上報，最近的父級當"主控"，匯總整棵樹的矩形數(shù)據(jù)，只畫一個覆蓋層、跑一道光波。

覆蓋層本身是個絕對定位的div，背景是移動的漸變，再用CSS mask-image把收集到的矩形切成對應(yīng)的形狀。一道動畫，多種形狀，完全同步。

和傳統(tǒng)庫的區(qū)別很明顯。市面上大部分方案給你灰色塊自己擺，十個卡片就十條獨立的光波，各跑各的，看起來又亂又廉價。shimmer-trace把全頁收進一個覆蓋層，眼睛追著一條光走，觀感干凈得多。

安裝就一行：npm install shimmer-trace。Loading狀態(tài)切false時，光波消失，真實UI已經(jīng)在底下等著，尺寸位置一模一樣，沒有跳動。