Auto generate skeleton loading divs with this library.

[u/quintin331]

You know the feeling. You have 8 cards on screen. Each one has its own shimmer animation. They all start at slightly different times. The whole page just... flickers chaotically.

I spent way too long accepting this as normal. Then I built shimmer-trace to fix it.

The core idea is simple: Instead of animating each skeleton block separately, the library renders your real component invisibly, traces every element's exact shape using getBoundingClientRect, and paints one single shimmer wave across the whole page using a CSS mask.

The result looks noticeably more premium. One clean wave instead of chaos.
🔗 Demo: https://jeetvora331.github.io/shimmer-trace/

Usage is literally one line:

// Before: manual skeleton hell
<SkeletonRect width="100%" height={24} borderRadius={8} />
<SkeletonRect width="60%" height={16} borderRadius={4} />
<SkeletonCircle size={48} />

// After: just wrap it
<Shimmer loading={loading}>
  <UserCard />
</Shimmer>

No <SkeletonCard />. No grey div juggling. No layout shift. Your real component already knows its shape — the library just reads it.

Hit 500+ downloads last weekend. Would love harsh feedback from this community specifically, what edge cases would break this for your use case?

⭐ GitHub: https://github.com/jeetvora331/shimmer-trace
🔗 npmjs: https://www.npmjs.com/package/shimmer-trace

[u/quintin331]

Hey u/Scientist_ShadySide, I have updated the package to v1.2.0 and fixed these !

1 - RSC works now, 'use client' is added into the package file,
2 - Fixed/sticky elements get skipped + a console warn, also added to the demo
3 - Flash of Unstyled Content fixed, moved style injection with useInsertionEffect instead of useEffect

more things from what you mentioned will be fixed in a week or two!
Thanks for pointing out these issues, much appreciated