Skeleton screens typically require maintaining a separate hand-crafted component for every real component, causing them to fall out of sync whenever the UI changes. This tutorial presents an alternative approach: render the real component with mock data, use getBoundingClientRect() to measure the DOM, and overlay shimmer blocks at the exact positions of leaf elements. The technique is built step by step — from a single shimmer overlay, to per-element measurement, to stealing border-radius via getComputedStyle(), to wiring it all together with useLayoutEffect and React.cloneElement for mock data injection. Edge cases covered include zero-dimension elements, images without explicit sizes, SVGs, async components, and window resize during loading. The result is a Shimmer wrapper component where the real component IS the skeleton, so layout changes automatically propagate to the loading state without any manual maintenance.
Table of contents
The maintenance trap 🔗What existing libraries do (and don’t do) 🔗Step 1: The dumbest possible version 🔗Step 2: Measure the DOM 🔗Step 3: Steal the border radius 🔗Step 4: The shimmer animation 🔗From static HTML to a real app 🔗Step 5: Wire it up with useLayoutEffect 🔗Step 6: Handle edge cases 🔗Designing mock data 🔗The tradeoffs 🔗References 🔗Sort: