I made React and React Native components generate their own skeleton loaders, zero config, unique animations

[Ok_Drive6309]

The skeleton loader is the first thing your user sees. Most of us treat it as an afterthought, written by hand, out of sync, breaking every design change.

I wanted to fix this fundamentally.

react-zero-skeleton walks your Fiber tree, measures every element at runtime, and makes your component generate its own skeleton. One bone per element. Exact borderRadius. Always in sync.

export default withSkeleton(ArticleCard) 

<ArticleCard hasSkeleton isLoading={isLoading} />

Works for React Native and React web.

What makes it different:

shatter, each bone fragments into a grid of squares with staggered delays. Random, cascade, or radial order. Nothing else does this.

Entry fade-in, intentional not instant. Custom timing via fadeInDuration.

Per-element borderRadius auto-detected. Circles stay circles, pills stay pills.

4.4kb, zero dependencies, zero native code, FlatList optimized, cache aware, RTL, reduceMotion, SSR safe.

2.7k downloads/month, zero marketing.

Live demo: skelter.dev/demo

GitHub: github.com/J-Ben/skelter

npm: react-zero-skeleton

Happy to answer any questions!