Connection state exposed to UI as connected, connecting, or disconnected indicator

When the realtime socket drops and the UI keeps rendering as if everything is fine, users type messages into a dead channel, assume their posts sent, and discover hours later that nothing reached the server. That silent failure mode destroys trust in the product, generates duplicate support tickets, and corrupts conversation ordering once reconnection flushes a backlog of stale sends. A visible connection indicator is the primary user-experience affordance that distinguishes a working realtime feature from one the user has to guess at, and its absence is the top cause of reported bugs in chat and collaboration tools.

Track the socket's lifecycle in React state and render a distinct visual for each of connected, connecting, and disconnected. Subscribe to connect, disconnect, and connect_error in a single effect inside a component like src/components/ConnectionIndicator.tsx, and return the subscription cleanup so stale handlers do not leak across remounts.

const [state, setState] = useState<'connected' | 'connecting' | 'disconnected'>('connecting');
useEffect(() => {
  socket.on('connect', () => setState('connected'));
  socket.on('disconnect', () => setState('disconnected'));
  socket.on('connect_error', () => setState('disconnected'));
  return () => { socket.off('connect'); socket.off('disconnect'); socket.off('connect_error'); };
}, []);