Planned Maintenance Progress Error Block for React

They are typed. WINDOW_START and WINDOW_END are the maintenance window and AS_OF is the moment the page was drawn, all ISO times in UTC. The percent is worked out from those three, so the bar, the "65% done" text and the clock times always agree, and nothing reads the clock, so the page looks the same on the server and in every time zone. In your app, pass the real window, and use the current time for AS_OF if you want the bar to move.

It waits 600 ms behind a busy button, then says "Checked at 15:17 UTC: still in maintenance", the same typed result every time, and adds that this demo asked nothing. Focus moves to that line, which is a polite status region present from load, so a screen reader hears the result. Replace the wait with a request to your health endpoint and show what it answers.

A planned outage is a 503 Service Unavailable, ideally with a Retry-After header holding the expected return time. A 200 would let search engines index the notice as your page, and a 500 says something broke rather than something is planned. A component can't set the status: return it from your server or edge when the maintenance flag is on.

It shows how much of the window has passed, not the work finished, which a page seldom knows. That's why the copy says "Maintenance progress" next to the start and the expected return rather than promising a finish time. The bar is decorative for assistive technology; the percent and both times are in text beside it.

It goes to #: point it at your real status page. It's a Button with render set to an a element and nativeButton={false}. Nothing else on the page navigates, and nothing leaves the page.

The heading, the bar and the times stay in one column, and Check again and the status link stack full width under them, so the button sits on the first screen. The rails and the ruled band keep their plus marks at the edges.