Real-Time Notification Feed Block for React

From the file: ARRIVALS holds six typed events and "Start the feed" lets them in on a short wait, so nothing is received and a reload starts again. The feed never starts on its own. To make it real, replace the script with your stream (a socket, server-sent events or polling): put what arrives into the same queue, keep pulled as how many the reader has let in, and the pill, the count and the list follow. The wait between events is GAP.

Only the script, and only after you press Start: one timer at a time, cleared when you press Pause, when the feed ends and when you leave the page. Pause keeps what has come; Resume carries on; once all six have arrived the button reads "Start again", which clears the list back to its five events and runs the script again. There is no timer on load and nothing loops but the live dot, which pulses only while the feed runs and not under reduced motion.

The pill sits in its own row of one height, so it appearing or going never moves the list. The list is a fixed height that scrolls inside, so letting rows in at the top pushes older ones down inside it, never the page; the rows you are reading stay as they are until you press the pill. After you press it, focus moves to the newest row's title.

The status line is a polite live region and says "2 new notifications waiting." as they arrive, "2 added at the top." when you let them in, and what the Pause and Start buttons did. The pill's name says what it does ("Show 2 new notifications"). Unread rows are a dot, a heavier title and the word "Unread" for a screen reader, never a colour, and the switch is named by its text. Under reduced motion the rows simply appear, with no highlight.

Turning it on lets everything waiting in at once ("2 added at the top. New ones now come in at once.") and later arrivals appear as they come. Turning it off makes later arrivals wait in the pill again. Neither moves the rows you are reading except by adding to the top.

The switch and the buttons stack, the pill row keeps its height with or without the pill, and each row keeps a fixed height with its title and detail on one line each. The list scrolls inside its box.