Data Sync Live Banner Block for React

No: it's a simulated run so the block always shows the same story. TOTAL is the record count and STEPS is how far through the run is at each tick (a tick every 320 ms), so the counter and the bar come from one number. To drive it from a real job, replace the steps with the job's progress, keep done as "progress is complete", and set the next-run time from the job's schedule.

The countdown is a Countdown Text in its digital format, aimed at three minutes after the moment the run finished. It's worked out in the browser after the first render, so there is never a calendar date and the server's markup is stable: until the run ends, the line holds a plain 03:00 so nothing shifts. At zero it stops and stays at 00:00.

The counter's digits roll like an odometer and the bar grows with a CSS transition, for a few seconds, once. With reduced motion the run is already over when the block shows: the counter reads 1,248, the heading says synced and the countdown has started.

The visually hidden status line that is in the page from the start says "Sync finished, 1,248 records reconciled." when the run ends. The counter rolling up and the countdown ticking are not announced: a polite region that spoke every second would drown out the page. The progress bar is labelled "Sync progress".

The two headings share one grid cell, and so do the two lines under them; the one not showing is invisible and hidden from assistive technology, so the cell keeps the taller height. The counter uses tabular digits, so its width only grows when it gains a digit.

Below md the panel stacks: the status and heading, then the counter, then the log link, with the bar still at the panel's foot. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the arrow mirrors while the digits keep their order.