feat: add offline banner and auto-retry indicator for failed API polling (#511)#682
Open
Amas-01 wants to merge 1 commit into
Open
feat: add offline banner and auto-retry indicator for failed API polling (#511)#682Amas-01 wants to merge 1 commit into
Amas-01 wants to merge 1 commit into
Conversation
…ing (Junirezz#511) - NEW: useNetworkStatus hook for browser connectivity detection * Subscribes to window online/offline events * Returns { isOnline: boolean } * Testable with fake timers and mocked navigator.onLine - NEW: useRetryState hook for tracking React Query retry cycles * Monitors query cache for error states * Computes seconds until next retry attempt * Returns { isRetrying: boolean, secondsUntilRetry: number | null } - ENHANCED: OfflineBanner component with retry countdown indicator * Offline state: Non-dismissible warning banner when device is offline * Retrying state: Shows countdown "Reconnecting... retrying in Xs" * Success state: Brief auto-dismissing success message on reconnection * Hidden state: Renders nothing when online and not retrying * ARIA attributes: role="alert" for offline (assertive), role="status" for retrying/success - UPDATED: Polling pause/resume for network awareness * useVaultData.ts: useVaultSummary(enabled: isOnline) pauses polling when offline * useFeeEstimate.ts: Added enabledNetworkPolling parameter for XLM price polling * useTvlTicker.ts: Added enabled parameter to pause TVL polling when offline * VaultContext.tsx: Passes isOnline to useVaultSummary * TvlTicker.tsx: Uses useNetworkStatus for polling control * VaultDashboard.tsx: Passes isOnline to useFeeEstimate - STYLING: Added .offline-banner--retrying variant (amber background) * Z-index: 1000 (above page content, below modals) * Auto-dismisses success after 4 seconds * Responsive layout with no text truncation - TESTS: Comprehensive unit tests * useNetworkStatus.test.ts: Online/offline transitions, event listener cleanup * useRetryState.test.ts: Query cache subscription, countdown logic * OfflineBanner.test.tsx: Enhanced tests for all banner states, ARIA attributes, icons Polling implementations now pause automatically when device goes offline and resume on reconnection. Users see a clear offline banner and retry countdown, improving connectivity awareness without manual intervention. Closes Junirezz#511
|
@Amas-01 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! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request: Add offline banner and auto-retry indicator for failed API polling
Closes #511
Summary
NEW: useNetworkStatus hook for browser connectivity detection
NEW: useRetryState hook for tracking React Query retry cycles
ENHANCED: OfflineBanner component with retry countdown indicator
UPDATED: Polling pause/resume for network awareness
STYLING: Added .offline-banner--retrying variant (amber background)
TESTS: Comprehensive unit tests
Polling implementations now pause automatically when device goes offline and resume on reconnection. Users see a clear offline banner and retry countdown, improving connectivity awareness without manual intervention.