shadcn.io is not affiliated with official shadcn/ui
Processing State Checkout Block for React Aria
A pay dialog that walks through three processing steps on a typed schedule, started by pressing Pay, with reduced motion showing them done at once and a Replay to watch them again.
Installation
Overview
Show people what is happening after they press Pay, with this processing-state checkout for React with React Aria. The page is Woodsorrel, a print studio's order, drawn as shapes under a scrim, and the open state is a Dialog: a title, the order in one line, and a list of three steps (checking the card, confirming with the bank, preparing your order) that move on about a second each, with a mark for each state and its state in words beside it. The run starts when you press Pay, never from the clock at render, and ends with "Paid in this demo. Nothing was charged." Under reduced motion all three steps show done at once. The header's outline Pay button opens the real modal dialog with its focus trap and Escape and replays the steps, and Replay puts them back. Shown open in place for the preview; in your app keep the Dialog and drop the in-place copy. Pay is the only Shine Button. It's built from Dialog, Button, Shine Button and Guides. For payment, upload, export and any wait that has stages worth naming.
FAQ
Is the dialog on load the real one?
No: on load it is a native non-modal dialog element drawn in place over the page, so nothing is trapped or focused in the docs page around it. Pressing the Pay button in the header opens the real Dialog with a focus trap, Escape and focus return, and its steps start again. In your app keep only the Dialog and delete the in-place copy, its scrim, the stage Escape handler and the in-place state.
How is the schedule decided?
Each step takes a typed 1,000 ms and the next one starts from one timer set when the previous one ends, so the steps cannot run ahead of one another. The run begins on the press (it is held in state with a press counter), and the whole thing is bounded: three steps, then done. Nothing loops except the small spinner on the current step, and that stops under reduced motion.
What happens with reduced motion?
The spinner does not turn, and the press jumps straight to the done state: all three steps read Done and the line below says the payment was made in the demo. The words carry the state in every case, so nothing depends on seeing the animation.
What if I close the dialog while it runs?
The run continues, because it belongs to the page and not the dialog. The page behind it shows Paid when it is done and the polite status line says so; the real dialog speaks its own status while it is open and the outer one stays quiet, so nothing is announced twice.
How does it work with a keyboard and a screen reader?
The dialog is labelled by its title and described by its sentence; the steps are an ordered list whose items say their state in text; one live line announces the step in progress and the result. Escape and the Close button close the in-place copy and send focus back to Pay.
What stays local, and how do I connect it for real?
The steps are a timer; nothing is sent or charged. To connect it, start the run when your server accepts the payment and advance each step from the server's real states (the provider's webhook or a status poll) instead of the timer, keeping the same list, the same words and the same final line.