Connection Lost Notification Block for React

No. The demo never touches your connection: Retry now only counts, and says so on the page and in the status line ("This demo never reads your network: Retry only counts"). The next try is a fixed sentence, "Next try in about 30 seconds", not a ticking clock. After ten attempts the sentence reads "Automatic retries have stopped" and Retry now says why it waits. In your app, call your reconnect function from Retry now, set attempt from its result and read navigator.onLine or your socket's state for the bar itself.

It is the feature: while offline, an app that keeps working has to say which changes have not been sent. EDITS holds three typed edits (an id, a kind that picks the glyph, its text and the UTC time it was made); the panel shows them in the order they will send, and the bar and the pill say how many wait. In your app fill the list from your outbox of unsent operations and clear it as they are acknowledged.

It folds the bar and the panel away and puts a small button at the stage's foot end, "Offline: 3 queued", so the canvas is free to work on and the notice never goes away entirely. Pressing the pill brings the bar back and moves focus to Retry now. The notice isn't timed: it stays until the connection returns, and the pair to this block, notification-reconnected, is what you show then.

The Collapsible's trigger is a real button with aria-expanded; closed, the tips are unseen and out of the tab order, and opening grows the panel upward from the bar, which stays where it is. The tips are written to be true anywhere: check the device is online, turn Wi-Fi off and on, keep the tab open so the queue sends.

The bar is a plain note, not an alert, so it never interrupts: a single polite status line says what each press did ("Attempt 5 of 10: still offline"). The queue is a list with a heading, the times are time elements, the pill's name says how many edits wait ("Offline, 3 queued. Show the offline bar") and every control is a real button with a visible focus ring. Nothing here depends on colour: the glyphs and the words carry it.

The stage is taller so the panel and the bar fit with the tips open. The bar's sentence takes the full width and its two buttons drop to a row under it; each queued edit wraps onto a second line instead of being cut.