Migration Wizard Onboarding Block for Vue

In the order of the list, one at a time. A source that is queued waits one step, connects for one step, then imports in four steps of 25%, each step 600 ms. Pressing Connect on the last row while the first is running just puts it in line.

Yes: every row that is waiting, connecting or importing shows Pause, and Resume continues from where it stopped (a row paused before it started goes back in line). The timer runs only while some source is moving, it stops when the queue is empty and when the page goes, and nothing loops.

The queue does not animate: pressing Connect, Resume or Import all marks the sources Done at once, and the combined bar jumps to its end. The words and counts are the same.

They are typed in the file (tasks on each source) and labelled as example numbers in the status line. The summary adds up the finished sources, so it always matches the rows. View says opening the tasks is not wired in the demo.

Each row's button is named for its action and the tool ("Connect Asana"), keeps its place when its label changes, and is the only control in the row. The status line in the foot is one polite region that reports the last action or the summary.

Everything: nothing is connected and the timer only moves numbers. In your app start an OAuth connection where act sets a row in line, run each import on your server, and replace the 600 ms steps with its real progress events.