Login

u/quintin331

Spent years fixing grey skeleton divs. Built this npm package so nobody has to again.
▲ 3 r/coolgithubprojects

Spent years fixing grey skeleton divs. Built this npm package so nobody has to again.

Every time I built a skeleton loader, it was the same pain: copy the card, replace content with grey boxes, tweak padding after every design change, watch all the shimmer animations run out of sync like a broken disco floor.

So I built shimmer-trace, a React library that wraps your real component and automatically traces the shape of every element to generate a perfectly matched skeleton. One wrapper, zero hand-drawn boxes.

    <Shimmer loading={isLoading}>
      <UserCard user={user} />
    </Shimmer>

That's literally it. No <SkeletonCard />. No fake grey divs.

u/quintin331 — 7 hours ago
▲ 1 r/npm+1 crossposts

Spent years fixing grey skeleton divs. Built this npm package so nobody has to again.

Every time I built a skeleton loader, it was the same pain: copy the card, replace content with grey boxes, tweak padding after every design change, watch all the shimmer animations run out of sync like a broken disco floor.

So I built shimmer-trace, a React library that wraps your real component and automatically traces the shape of every element to generate a perfectly matched skeleton. One wrapper, zero hand-drawn boxes.

    <Shimmer loading={isLoading}>
      <UserCard user={user} />
    </Shimmer>

That's literally it. No <SkeletonCard />. No fake grey divs.

reddit.com
u/quintin331 — 1 day ago
▲ 0 r/reactjs

I was tired of spending afternoons nudging grey rectangles, so I built a React library that traces your real UI and generates the skeleton automatically

Every time I built a skeleton loader, it was the same pain: copy the card, replace content with grey boxes, tweak padding after every design change, watch all the shimmer animations run out of sync like a broken disco floor.

So I built shimmer-trace — a React library that wraps your real component and automatically traces the shape of every element to generate a perfectly matched skeleton. One wrapper, zero hand-drawn boxes.

<Shimmer loading={isLoading}>
  <UserCard user={user} />
</Shimmer>

That's literally it. No <SkeletonCard />. No fake grey divs.

🔗 Live demo: https://jeetvora331.github.io/shimmer-trace/ 📦 npm: npm install shimmer-trace ⭐ GitHub: https://github.com/jeetvora331/shimmer-trace Would love feedback — especially if anyone's hit edge cases with deeply nested components or SSR setups.

reddit.com
u/quintin331 — 1 day ago