Rate Limit Dialog Block for React

So you can see it without a click, and so a poster or a gallery card never ages. On load the dialog is a copy drawn in place over the console: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. In it the clock stands still at 0:42 and the button reads "Wait 42s" with its fill full. Send request in the header opens the real Dialog, modal, with its focus trap and Escape, and there both clocks run. Both wrappers share LimitFields and the block's state. In your app keep the Dialog and drop the copy.

The reading "Resets in 0:42" is set by the ticks of the catalog Timer, kept out of sight, which counts the typed 42 seconds; the Countdown Button counts the same 42 seconds on its own, with a CSS fill that is the real clock of its label and a digit that ticks once a second. They start together and end within a frame of each other, and whichever finishes first turns the button into Retry request and says "You can retry now". In your app start both from the server's Retry-After header instead of a typed number.

The status line inside the dialog says when the clock starts ("Resets in 42 seconds"), at 30 and at 10 seconds, and when you can retry. It never speaks every second. The visible clock is plain text, and the button's own polite status reads its waiting label once. The progress bar is decorative: the same fact is in the sentence next to it. A modal hides the page's own status message, which is why the dialog carries a second one.

Nothing is requested. Once the wait is over, pressing it closes the dialog, adds a 200 OK row at the top of the drawn console and says so in a polite status message; before then the button holds its presses and keeps focus, and its label and the clock say how long is left. In your app resend the request in retry, keep the dialog open with a busy state until the response arrives, and if you get another 429 restart the clock from the new Retry-After.

The real dialog opens with focus on Retry request. While the wait runs that button is still focusable, so a keyboard user stays on it and hears its waiting label, but pressing it does nothing until the clock ends; then the same press retries. Escape, Close and the corner button close the dialog and return focus to Send request. Retry request is the focus target through initialFocus. The clock stops when the dialog closes and starts again, from 42, when it opens. The copy shown on load moves no focus; Escape inside it closes it the same way.

The copy shown on load docks to the foot of the page as a bottom sheet with its buttons pinned, Retry request above and Close under it, and the list scrolling above them. The status and the clock come first in the list so they stay in view. The real dialog keeps the Dialog's own phone layout, sticking to the bottom edge.