Loading Dialog Block for React

So you can see it without a click. On load the alert is a copy drawn in place over the page: a native dialog element with the alertdialog role that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Review release button opens the real Alert Dialog, modal, with its focus trap and Escape, and the copy stays closed until a reload. Both show the same RunFields component and share the block's state, so a run started in the copy carries on in the real one. In your app keep the Alert Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Every part has its place before it has its content. The four steps are rows of one height; the word at the end of each row has a fixed width; the sizes sit in cells as tall as the numbers, and a skeleton fills the same cell, so nothing is inserted, removed or resized when a state changes. The bar's track is always there, the description under the title keeps its two lines, and the region that loads is marked aria-busy while it does, with "Loading file sizes" for screen readers. The numbers swap in place when the run is done.

It starts when Publish release is pressed and takes about four and a half seconds: 0.9, 1.5, 1.2 and 0.8 seconds for the four steps, one timer each, so the wait is bounded and nothing runs on load or in the copy until then. The bar is a CSS transition for the length of the step, so it can't drift from the clock; with reduced motion the bar jumps from step to step and the spinner stops turning, since the steps still carry the information. A polite message names each step as it starts.

Stop halts the run at once: the step it was on reads Stopped, the bar drops back to the steps that finished, the sizes stay as dashes, and the description says nothing was published. Start over runs the four steps again. Escape and the outside click do nothing while it runs, because the alert refuses to close until the run ends or is stopped; Cancel is Stop in that time. After it ends or is stopped, Cancel and Escape close it and return focus to Review release.

The real alert opens with focus on Cancel. Pressing Publish release moves focus to Stop, so the one thing that matters while it runs is under the keyboard; when the run ends, focus goes to Done, and after a stop to Start over. Cancel is the focus target through initialFocus.

All of it. Nothing is packed, uploaded or published: the steps are timers, the files and sizes are typed, and finishing only turns the drawn chip to Live. In your app start the real job in start, move step from your server's progress events instead of timers, keep the dialog from closing with the same check in openTo, and fill the sizes from the response; cancel the job on the server when someone presses Stop.