shadcn.io is not affiliated with official shadcn/ui
DNS Propagation Success Block for Solid
A confirmation panel for a saved DNS record: the record as four monospace cells with a copy button for its zone-file line, eight resolvers each Live or Pending with a bar and a count, and a Check again button that moves the next two resolvers to Live until the record has propagated.
Installation
Overview
Show where a new DNS record has spread with this confirmation panel for Solid with Ark UI. It is the panel Zonehurst, a DNS host, shows once a record is saved: a header with one action, the Shine Button that opens DNS management, over one framed card ruled by Guides. The first band is the record, with a success mark, the day it was saved, a Copy Button for its zone-file line and four cells in monospace (type, host, value, TTL). The second is propagation by resolver: a bar and "3 of 8", a sentence about who still holds the old answer, and eight resolvers in a grid, each Live or Pending with its address and the answer it gives now. The foot has Check again, an outline Button. For DNS hosts, domain tools and any change that takes time to reach everyone.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was looked up. The record, the eight resolvers and their addresses (a documentation range) are typed sample data, and Check again follows a typed sequence of 3, 5, 7 and 8 resolvers answering, after a short wait. To wire it, replace the wait in check with a query to each resolver (or to your own probes), build each resolver's state from its answer, and say in the sentence what the pending ones still return.
Why do some resolvers still answer with the old address?
Because a resolver keeps an answer until its copy expires, which is the TTL the old record had. The page says so: the old record's TTL was 600 seconds, so the pending resolvers drop it within 10 minutes. The 10 is worked out from the typed old TTL, and the pending count is worked out from the sequence.
What does Check again do, and what happens at the end?
It waits a moment (the button stays focusable and says "Checking…", so it never changes size), moves the next two pending resolvers to Live, updates the bar, the count and the sentence, and says what changed in a polite status message. At 8 of 8 the sentence says the record has propagated, the button reads "All checked" and pressing it says nothing remains to check.
Is the state readable without color?
Yes. Each resolver says Live or Pending in words, with a filled dot for Live and a hollow one for Pending, and the line under its address says what it answers ("answers 203.0.113.42" or "still answers 192.0.2.17"). The bar is a drawing hidden from assistive technology, since "3 of 8" says the same.
What does the copy button copy?
The record as a zone-file line (shop 300 IN A 203.0.113.42), through the browser's clipboard. A screen reader hears that it was copied, and the record cells are left-to-right whatever the page's direction.