--- title: Build your own shimmer skeleton that never goes out of sync description: Skeleton screens typically require maintaining a separate hand-crafted component for every real component, causing them to fall out of sync whenever the UI... canonical: https://daily.dev/posts/build-your-own-shimmer-skeleton-that-never-goes-out-of-sync-4p828pykp twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Build your own shimmer skeleton that never goes out of sync | daily.dev og:description: Skeleton screens typically require maintaining a separate hand-crafted component for every real component, causing them to fall out of sync whenever the UI... og:url: https://daily.dev/posts/build-your-own-shimmer-skeleton-that-never-goes-out-of-sync-4p828pykp og:image: https://api.daily.dev/og/posts/4p828PyKP.png og:image:alt: Build your own shimmer skeleton that never goes out of sync og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Build your own shimmer skeleton that never goes out of sync **[Neciu Dan](https://daily.dev/sources/neciudan)** · 16 min read · 0 upvotes · 0 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- Tags: [#react](https://daily.dev/tags/react), [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/build-your-own-shimmer-skeleton-that-never-goes-out-of-sync-4p828pykp) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Build your own shimmer skeleton that never goes out of sync","url":"https://daily.dev/posts/build-your-own-shimmer-skeleton-that-never-goes-out-of-sync-4p828pykp","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/build-your-own-shimmer-skeleton-that-never-goes-out-of-sync-4p828pykp"},"datePublished":"2026-04-19T08:01:55.420Z","dateModified":"2026-04-19T08:02:40.453Z","description":"Skeleton screens typically require maintaining a separate hand-crafted component for every real component, causing them to fall out of sync whenever the UI...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6af3fa4339ff89da963fe69c9e467a87?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6af3fa4339ff89da963fe69c9e467a87?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Neciu Dan","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Neciu Dan","logo":"https://media.daily.dev/image/upload/s--xeHLtkTA--/f_auto,q_auto/v1776585705/logos/neciudan","url":"https://daily.dev/sources/neciudan"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/build-your-own-shimmer-skeleton-that-never-goes-out-of-sync-4p828pykp","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,css","timeRequired":"PT16M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Neciu Dan","item":"https://daily.dev/sources/neciudan"},{"@type":"ListItem","position":3,"name":"Build your own shimmer skeleton that never goes out of sync"}]} ```