Offline Error Block for React

The online and offline events and navigator.onLine are real, and they are only read. Nothing is requested, written or synced: the list of saved items and the two waiting changes are typed constants (SAVED and CHANGES), and the line under the list says what a real app would do. To wire it for real, keep an outbox of edits in IndexedDB, add them as people work, flush the outbox when the online event fires, and cache the pages and data you list with a service worker.

A demo control, so a viewer who is online can still see the failing state. It is on when the page opens. Turn it off and the page follows your browser: still offline if the browser really is, back online otherwise. Remove the switch in your app and keep offline = real === false.

Yes, in one direction. false is reliable: the browser has no network. true only means it is connected to some network, which may not reach your server. The button says exactly that ("Your browser says: online") and never claims more. For a true test, send a small request to your own server and treat a failure as offline.

It shows a busy button for about half a second, reads navigator.onLine again and says what the browser says in a polite status line, plus what the switch changes ("The switch is holding this page offline"). Focus moves to that line because a busy button drops it. Nothing is sent to your server.

The server can't know whether a visitor is online, so the first render is fixed (the switch on, so offline) and the browser is read in an effect after the page loads. That keeps the server and browser markup identical, so there is no hydration mismatch and no flash of the other state.

The button is full width and the status line reserves three lines so a long answer never moves the list. The page keeps its height when the state changes, because both headings and both sentences share one cell.