Region Migration Status Error Block for React

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.

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.

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.

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.

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

The heading, the sentence and the status link stay on the first screen, the drawn move scales to the width with its percent between the two drives, and the five steps stack as full-width rows with the state word at the end.