Live Indicator Banner Block for React

No: it simulates a poll so the preview is always healthy. Every 30 seconds POLL_MS it takes a new time and the next number from P95, which restarts the ring and the age. To connect it, call your health endpoint at that moment and put the real latency and the time of the answer in state. It stops after MAX_POLLS so a left-open tab doesn't poll forever; raise it or remove the cap for a dashboard.

No. It is a one-second burst each time the page polls, drawn with CSS and restarted by giving it a new key, so between polls the dot is still. With reduced motion there is no ring at all: the dot and the text carry the state.

The age is worked out from the clock, which the server can't know. Until the first render in the browser the line holds an invisible placeholder of the same width, so nothing shifts when "14 seconds ago" appears. After that a one-second tick recounts it, in seconds for the first minute and in minutes after, written with Intl.RelativeTimeFormat ("now", "1 second ago"). The words change in place, with no animation, so the line stays still and readable.

A routine "all good" that interrupted a screen reader every 30 seconds would be noise, and the age changes every second. The heading and the line are plain text that can be read at any time. If your block can turn bad, put the changed state in a polite status line that is in the page from the start and fill it only when the state changes.

The framed dot and the text share the first row; the link wraps under them. The frame's marks sit inside the page padding, so nothing scrolls sideways at 320 pixels, and in a right-to-left layout everything mirrors while the latency keeps its unit in reading order.

Yes. The dot and its ring use the success token, and everything else is foreground and muted text on your page background, light or dark, in any preset.