shadcn.io is not affiliated with official shadcn/ui
Region Migration Status Error Block for React Aria
A full-height status page for cloud storage moving an account between regions: a drawn move whose dashes run three cycles, and an accordion of five steps that each say what they do and what stays available.
Installation
Overview
Tell people where their data is going, with this region migration block for React with React Aria. It's the status page of Atlasdrive, cloud file storage: the page's rails run its full height and one band crosses the screen between two rules with a plus mark at each end. The heading says the files are moving to US West, one sentence gives how much of the move is done and when it should finish, and a Shine Button link to the status updates, the only colored control, comes right after. Under it, an inset frame draws the move: two regions as drives (US East emptying, US West filling) joined by a dashed line whose dashes run for three cycles on load, then rest. Below, an Accordion holds the five steps (backup verification, replication, file storage, DNS, the final check), one open at a time, each with a Badge for its state, a shape, and two lines: what it does and what stays available while it runs. It's built from Accordion, Badge, Shine Button and Guides, with CSS motion only. For storage, hosting and any service that moves customers between regions.
FAQ
Where does the percent come from?
From the steps. Each typed step has a weight (its share of the whole move), a state (done, running or queued) and, for the running one, how far through it is. The percent is the weighted sum of what is finished, so the heading's sentence, the middle of the drawn line and the fill of both drives always agree. Change a step's state in STEPS and all three follow. Here it is typed: nothing migrates.
How do the dashes move, and when do they stop?
The line is an SVG stroke whose dash offset transitions over 2.4 seconds, three dash periods in total, and then it rests: nothing loops. Under reduced motion the line simply appears. In a right-to-left page the drawing mirrors, so the move still runs toward the destination at the end side.
How does the accordion behave?
One step is open at all times, starting with the one that is running; opening another closes the first. Every panel has the same minimum height, so the page doesn't change size when you move between steps, which matters on a full-height page that is centered. A polite status line reads the step you opened and what it does. Tab moves between the triggers; the arrow keys don't.
Is what stays available true?
Each line is typed copy for this fictional product: change it to what your migration really keeps up. The rule behind it is worth keeping: for each step, tell people what they can still do, because "the service is moving" alone makes them stop working.