Cache Purge Success Block for React

Nothing was purged or fetched. The six regions, their purge and warm times, the three paths and their object counts are typed sample data, and the button only walks the regions through the states. To wire it, build REGIONS from your CDN's purge result (each with its code, city and times) and PATHS from the purge request; the object total, the slowest purge and the counts are worked out from them. Replace the wait in press with your own warm-up request.

It reads Re-warm the cache, then Warming… while it fills the six regions one after another, 220 milliseconds apart, each cell's bar growing and its word changing from Purged to Warm, and then Purge again, which empties them all at once. The same node keeps focus the whole time and the panel never changes height. With reduced motion the bars jump instead of growing, but the regions still fill in order.

Yes. A purged region has a hollow dot, the word Purged and an empty bar; a warm one has a filled dot, the word Warm and a full bar, and the line under the bar says how long it took in words and numbers. The strip's last figure counts the warm regions, and one polite status line says what changed.

They are worked out from the typed data, never typed twice: the objects are the sum of the paths' counts, the slowest purge is the largest region time, the region count is the length of the list and the warm count follows the button. Numbers use a fixed en-US format so the server and the browser agree.

The header's button drops under the sentence, the four figures become two rows of two, the regions are two columns with the city on its own line, the chips wrap, and the re-warm button is full width in the foot.

View headers is the Shine Button in the header. It is a link to your own route. It is a Shine Button with render set to an a element and nativeButton={false}.