Rate Limit Error Block for React

A request counts against the limit for 60 seconds after it was sent, so slots free one at a time as the oldest requests age out, not all at once at the top of the minute. The grid shows that: 100 cells, one per request, ordered oldest first, and the cells that leave the window are the first ones. Tones show the age: solid under 20 seconds, lighter at 20 to 40 and lighter again at 40 to 60.

Because nothing in a page like this should tick on its own. The clock is a number the visitor moves: Let 10 seconds pass adds 10 to it, and everything else (the ages, the free count, Retry-After) is derived from the request times and that number. Start over puts it back at the moment of the error. A real page would show the header your limiter sent, and could count down from it.

Retry-After is the 60 seconds minus the age of the oldest request still in the window, 38 here because the oldest was sent 22 seconds before the page loaded. While no cell is free, Retry says "Still over the limit. Retry in 38 seconds of demo time. Nothing was sent." Once one is free, it takes the first free cell as a new request and says "Accepted in this demo: 13 remain." Nothing is sent anywhere.

Return a 429 from your server with a Retry-After header in seconds, and give the page the request times from your limiter (a sorted set of timestamps per key works for a sliding window). Replace the typed COUNTS with them, keep LIMIT and WINDOW, and the header, counts and grid follow.

The cells are a drawing, hidden from screen readers; the same facts are in the text: the limit, "100 of 100" in the window, the header, the free count in the status line after each action and a caption for the figure. In a right-to-left layout the grid keeps its order, because it is a time order and not text.

No: a component can't. Send a real 429 with Retry-After from your server, so well-behaved clients back off, and don't return a 200 with an error drawn on it.