feat(frontend): enhance interactive loading states in Network Status …

[emmanuelStack654]

…Indicator

closes #1166

Added the networkStatus namespace with 38 keys each — all status labels, loading/checking/error/offline states, latency/ledger/horizon detail strings, tooltip descriptions, polling control labels, and parameterised strings (lastChecked, latency, ledger, etc.).

network-status.ts
(new) Pure reducer with zero runtime dependencies:

NetworkHealth union: operational | degraded | partial_outage | major_outage | offline | checking | unknown
NetworkStatusState with fetchState, lastResult, errorMessage, checkCount, consecutiveErrors, isPolling, isManualCheck
All 7 actions: CHECK_START, CHECK_SUCCESS, CHECK_ERROR, POLLING_START, POLLING_STOP, DISMISS_ERROR, RESET
Pure helpers: deriveHealth (latency + HTTP status → health), healthToColor (health → Tailwind classes), selectLastCheckedLabel, and 5 boolean selectors

useNetworkStatus.ts
(new) Polling hook:

Fetches horizonUrl on configurable interval (default 30s), measures round-trip latency via performance.now()
Parses history_latest_ledger from Horizon JSON
AbortController cancels stale in-flight requests on re-check
Exponential back-off on consecutive errors (up to 5 min)
Pauses polling when the tab is hidden via the Page Visibility API
Exposes: checkNow, dismissError, pausePolling, resumePolling, lastCheckedLabel, announcement

NetworkStatusIndicator.tsx
(new) Two variants:

Full card — header with animated status dot, health label, network badge, expand/collapse button, error banner with retry + dismiss + consecutive error count, stats row (latency, ledger, last-checked, check-now), expandable details panel (Horizon URL, HTTP status, polling controls)
Compact pill — single button showing dot + status label, used in nav/sidebar
All 7 health states have distinct visual treatment (colour, ping animation for operational, spin for checking). All strings translated. prefers-reduced-motion respected.

NetworkStatusSkeleton.tsx
(new) Server-safe shimmer fallback — no hooks, no framer-motion. Full and compact variants. role="status" + aria-busy="true".

NetworkStatusIndicator.test.tsx
(new) 40+ tests covering:

Reducer: all 7 actions, consecutive error counting, state transitions
Selectors: all 5 boolean selectors + selectLastCheckedLabel
deriveHealth: 5xx → major outage, 4xx → partial outage, latency bands
healthToColor: correct colour tokens for each health value
Component: initial render, loading/busy states, successful check (latency + ledger display), error banner (role/aria/retry/dismiss), expand/collapse, compact variant aria attributes, showDetails=false, skeleton role/aria/label

[vercel]

@emmanuelStack654 is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@emmanuelStack654 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