Offline Queue Indicator
Displays the current connection status and number of reports waiting to sync. Composes Badge, Icon, and Loader atoms. Provides immediate, honest feedback about data transmission in crisis environments with unreliable connectivity.
Preview — Online, No Pending
Online
Preview — Offline with Pending Reports
Offline
7 pending
States
Online — no pending
Online
Offline — 3 pending
Offline
3 pending
Syncing — 2 pending
syncing
2 pending
Online — 1 pending
Online
1 pending
Accessibility
- Uses
role="status"andaria-live="polite"for non-intrusive screen reader updates. - Full
aria-labeldescribes both connection status and pending count. - Loader spinner has
motion-reduce:animate-pulsefor users who prefer reduced motion. - Icons are decorative (
aria-hidden) — text labels carry the meaning.
Trauma-Informed Design
- Honest connectivity feedback reduces anxiety — users know their reports are safe locally even when offline.
- Pending count assures users that reports are queued, not lost.
- Syncing animation provides feedback that the system is actively working.
- Status uses familiar green/amber/red color system for instant comprehension.