X
@devongovett thread (3): @devongovett: I recently worked on a skeleton componen…
@devongovettthreadx
TL;DR. A <Skeleton> wrapper that auto-shimmers any component by making text transparent with box-decoration-break: clone and syncing animations via Web Animations API startTime=0.
Takeaways
- Wrap real components with mock content in
<Skeleton>— no more hand-sizing rectangles to match layouts. box-decoration-break: clone+ transparent text + animated background gradient = shimmer that hugs each line fragment perfectly.- Set Web Animations API
startTimeto 0 to synchronize shimmer across every element on the page, regardless of when they mount.