Skip to content

feat: show equalizer bars while loading - #8

Merged
emakko merged 1 commit into
mainfrom
feat/loading-animation
Sep 24, 2026
Merged

emakko merged 1 commit into
mainfrom
feat/loading-animation

Conversation

@emakko

@emakko emakko commented Sep 24, 2026

Copy link
Copy Markdown
Owner

What

Replaces the plain grey loading text with four bouncing green equalizer bars above the same text.

  • New src/components/Loading.tsx: the bars plus the message, with role="status". The bars are aria-hidden, so screen readers hear the same text as before.
  • Used on all four loading states: "Connecting to Spotify…" (App.tsx), "Loading your playlists…" (PlaylistPicker.tsx), and "Loading songs…" (SwipeScreen.tsx, DedupeScreen.tsx).
  • styles.css: pure CSS. Each bar scales between 30% and 100% of its height, and the bars have different durations and delays so they don't move in lockstep. Under prefers-reduced-motion they stand still at different heights.

Notes for review

Testing

  • npm test: 129 passed. npm run build: succeeds.
  • Not checked in a browser. The preview setup wasn't available this time. Please take a look at app start or when opening a playlist before merging.

🤖 Generated with Claude Code

@emakko
emakko merged commit 7c23f8c into main Sep 24, 2026
2 checks passed
@emakko
emakko deleted the feat/loading-animation branch September 24, 2026 22:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant