Skip to content

feat: add system rate limit graceful banner#35

Open
EDOHWARES wants to merge 1 commit intogear5labs:buildfrom
EDOHWARES:feature/rate-limit-banner
Open

feat: add system rate limit graceful banner#35
EDOHWARES wants to merge 1 commit intogear5labs:buildfrom
EDOHWARES:feature/rate-limit-banner

Conversation

@EDOHWARES
Copy link
Copy Markdown

PR Description: feat: Add System 'Rate Limit' Graceful Banner #20

Summary

Introduced a global, non-intrusive warning banner to gracefully handle API rate limiting (HTTP 429) across the application. This ensures users are informed when they have exceeded the request limit rather than encountering silent failures or technical error messages.

Key Changes

  • API Interceptor Integration: Updated src/services/api.ts to catch HTTP 429 errors and dispatch a custom api-rate-limit event. This approach decouples the API service from Redux to prevent circular dependencies.
  • Global State Management: Expanded uiSlice in Redux to include isRateLimited state, allowing the banner to be toggled globally.
  • Event-Driven UI: Added a listener in Providers.tsx that captures API-specific events and updates the Redux store accordingly.
  • Rate Limit Banner Component: Created a premium, animated banner using Framer Motion and Lucide icons. The banner appears at the top of the interface with a subtle "amber" warning theme.
  • Root Layout Integration: Positioned the banner in src/app/layout.tsx for global visibility across all pages.

Technical Details

  • Interceptors: The Axios response interceptor now checks for error.response?.status === 429.
  • Animations: Used AnimatePresence for smooth height transitions and opacity fades when the banner is toggled.
  • Dismissible: Included a manual close button that allows users to clear the warning once they've acknowledged it.

Visuals

Rate Limit Active
(Imagine a sleek, amber-tinted banner at the top of the page with a pulsing clock icon)

Testing

  1. Triggered a 429 error from the backend.
  2. Verified the banner slides down smoothly from the top.
  3. Confirmed the banner can be dismissed manually.
  4. Verified that subsequent successful requests do not automatically hide the banner (unless explicitly configured to do so), ensuring user acknowledgement.

Closes #20

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 27, 2026

@EDOHWARES is attempting to deploy a commit to the Fishon Amos' projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave
Copy link
Copy Markdown

drips-wave bot commented Mar 27, 2026

@EDOHWARES Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@EDOHWARES
Copy link
Copy Markdown
Author

@Solomonsolomonsolomon , pls approve workflow and review

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.

[Frontend] Add System 'Rate Limit' Graceful Banner

1 participant