RAPIDA UI

Community Report Feed

Scrollable list of damage reports submitted by community members. Shows loading skeletons, empty states, and an offline queue indicator. Each report renders as a Damage Report Card molecule.

Preview — With Reports

Online
Partial
Residential Synced

14 Elm Street

Cracks along walls.

Ahmed K.
Complete
Hospital Pending sync

Central Hospital

Total structural failure.

Fatima R.

Preview — Loading State

Online

Molecules & Atoms Composed

  • x-molecules.damage-report-card — Individual report cards
  • x-molecules.offline-queue — Sync status indicator
  • x-atoms.loader — Skeleton card loading states
  • x-atoms.button — Empty state CTA
  • x-atoms.icon — Empty state icon

Accessibility

  • Uses role="feed" for the report list container.
  • Each report card has aria-setsize and aria-posinset for screen reader navigation.
  • aria-busy is set during loading states.
  • Empty state uses role="status" for live announcements.

Trauma-Informed Design

  • Skeleton loading cards prevent jarring layout shifts and reduce anxiety.
  • Empty state encourages participation without pressure.
  • Offline queue visibility reassures users their data is safe even without connectivity.