Skip to content

Conversation

@benperlmutter
Copy link

Summary

Adds a clear page loading indicator to provide visual feedback during navigation between pages.

Fixes #2912

Changes

New Component: RouteChangeProgress

  • Top-of-page progress bar using Base blue (#0052FF)
  • Animates 0% → 30% → 80% → 100% during navigation
  • Only shows if navigation takes >100ms (no flash for fast pages)
  • 10s timeout fallback

Accessibility Features

  • ✅ Respects prefers-reduced-motion preference
  • ✅ Screen reader announcements ("Loading page...", "Page loaded")
  • ✅ ARIA progressbar with aria-valuenow, aria-valuemin, aria-valuemax
  • ✅ High contrast mode support (forced-colors: active)
  • ✅ Not focusable (tabIndex={-1})

Files Changed

  • apps/web/src/components/RouteChangeProgress/index.tsx (new)
  • apps/web/src/components/RouteChangeProgress/index.test.tsx (new)
  • apps/web/app/AppProviders.tsx (modified)

Testing

  • 14 unit tests covering render, timing, accessibility, reduced motion, and cleanup
  • Manual testing recommended for visual verification

Screenshots

The progress bar appears at the top of the viewport during page navigation:

  • 4px tall, Base blue (#0052FF)
  • Smooth animation with glow effect
  • Fades out when navigation completes

Pull Request opened by Augment Code with guidance from the PR author

- Add RouteChangeProgress component with progress bar animation
- Integrate into AppProviders for global coverage
- Add comprehensive tests (14 test cases)

Accessibility features:
- Respects prefers-reduced-motion preference
- Screen reader announcements
- ARIA progressbar attributes
- High contrast mode support

Fixes base#2912
@vercel
Copy link

vercel bot commented Jan 27, 2026

Someone is attempting to deploy a commit to the Coinbase Team on Vercel.

A member of the Team first needs to authorize it.

@cb-heimdall
Copy link
Collaborator

🟡 Heimdall Review Status

Requirement Status More Info
Reviews 🟡 0/2
Denominator calculation
Show calculation
1 if user is bot 0
1 if user is external 0
2 if repo is sensitive 0
From .codeflow.yml 1
Additional review requirements
Show calculation
Max 0
0
From CODEOWNERS 0
Global minimum 0
Max 1
1
1 if commit is unverified 1
Sum 2

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.

UX: Loading state is not clear

2 participants