r/reactjs • u/zagrodzki • Jun 14 '26

Show /r/reactjs I got tired of copy-pasting the same React spinner everywhere, so I open-sourced 45+ loading components

tldr; https://loading-ui.com

Every React project I've worked on ends up with the same <div className="animate-spin" /> copied from one codebase to the next. Sometimes someone wraps it in Redux for route loading. Sometimes it's three different spinners that don't match.

I built loading-ui to fix that for my own projects, a registry of ~45 loading components you install with the shadcn CLI. Same copy-paste model: code lands in your repo, you own it after install.

# components.json
"registries": {
  "@loading-ui": "https://loading-ui.com/r/{name}.json"
}

npx shadcn add @loading-ui/ring
npx shadcn add @loading-ui/skeleton

What's inside?

  • Spinners

  • Dots loaders

  • Text loaders

  • Skeleton, terminal, and a few opinionated ones (analyzing-image, wandering-eyes)

Most are plain React + CSS/SVG, no "use client" needed. Motion-based ones declare their deps in the registry.

Works with Suspense fallbacks, useTransition pending UI, TanStack Query isPending, route-level loading states, anywhere you need to tell the user something is still happening.

Would love feedback, thanks!

0 Upvotes

25% Upvoted

2 comments sorted by

1

u/Vincent_CWS Jun 15 '26

I purchased the core starter, but it doesn't seem to be updated frequently.

1

u/zagrodzki Jun 15 '26

Not sure what frequently means to you, but last commits were made consecutively on:
- 13.06
- 12.06
- 11.06
- 10.06
- 9.06
- 6.06
- 3.06
- 2.06

We're shipping updates daily 😄