davidhu2000 / react-spinners / 34013363504

100%

master: 78%

push

github

feat: redesign the demo page (#905)

* feat: redesign the demo page

Rebuild the demo as a themed playground instead of a static gallery.

- Dark/light theme, stored in localStorage and applied before first paint
  so it does not flash. The chosen spinner color drives the page accent.
- Sticky control bar: search, color presets plus a custom picker, and
  size and speed sliders that drive every card at once.
- Loaders take different size props, so examples/loaderProps.ts records
  each one's defaults and scales them proportionally. The per-card copy
  button emits JSX built from those same values, omitting anything left
  at its default.
- Install block with npm/yarn/pnpm/bun tabs. All four commands share one
  grid cell so the box does not resize when switching between them.
- Replace the imperative scroll handlers that rewrote header.style with
  CSS sticky positioning, and drop the "Fork me on GitHub" ribbon.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix: serve the demo's content without JavaScript

The redesign moved the whole page into React, so nothing rendered until
the bundle ran. Restore progressive enhancement: the chrome is static
HTML again and React mounts into it.

- Topbar, hero, install command and footer are plain HTML. React owns
  three mount points: the theme toggle, the install tabs, and the
  controls and grid in #root.
- A card per loader is generated into index.html at build time from
  src/index.ts, so the list cannot drift. Without JavaScript the page
  still lists every loader and links each to its Storybook docs.
- The loaders inject their keyframes at runtime, so the animations
  themselves still need JavaScript.
- The static markup is sized to match what React renders over it, so
  the grid does not move when the bundle runs.
- A noscript rule hides the control bar, which is inert without JS.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

538 of 540 branches covered (99.63%)

Branch coverage included in aggregate %.

546 of 546 relevant lines covered (100.0%)

21.25 hits per line