shadcn.io is not affiliated with official shadcn/ui
Cache Purge Success Block for Radix UI
A confirmation panel for a CDN purge: four figures worked out from the data, six edge regions each with a cache bar and the time it took, the purged paths as chips with their object counts, and a local Re-warm that fills the regions one after another.
Installation
Overview
Confirm that a purge reached every region with this panel for React with Radix UI. It is the panel Edgemoss, a CDN, shows after a purge: a header with one action, the Shine Button that opens the headers, over one framed card ruled by Guides. Four figures sit on shared hairlines (objects purged, regions, the slowest purge, how many regions are warm again), six edge regions follow as cells with a code, a hollow dot and the word Purged, a bar for the cache and the time the region took, and the purged paths are read-only chips with their object counts. The foot has an outline Button that re-warms the cache, region by region, and then purges it again. For CDNs, CMS dashboards and any cache that can be emptied.
FAQ
What stays in the page, and how do I wire it for real?
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.
What does the button do?
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.
Is each region's state readable without color?
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.
Where do the figures come from?
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.