shadcn.io is not affiliated with official shadcn/ui
Database Backoff Schedule Error Block for Svelte
A full-screen page for a database that refuses connections: Retry now and a switch that retries by itself on a press-started countdown, four pool cells and the backoff schedule drawn to scale.
Installation
Overview
Tell people honestly that a database can't be reached and what is being tried, with this database connection error for Svelte with Ark UI. It's a whole screen, centred, with the page's rails and one band across it. A mark, the headline and one sentence lead to the Shine Button Retry now, the only colored control, beside a Switch named Retry automatically. Turning the switch on starts a Timer for the next wait (2, 4, 8, 16, then 32 seconds); when it ends the attempt is made, and the timer starts again for the next gap, for five attempts at most. Under them, on shared hairlines, are four cells of the connection pool (active, idle, waiting, last success) and the retry schedule drawn to scale: a solid segment for an attempt made, an outlined one for the next, a dashed one for those to come, with a cell under each saying its wait and its state. Every attempt is refused, so after the fifth the page says it is out of attempts and the button becomes Start over. The band's rules come from Guides, and the entrance is CSS only. For a managed database, an admin console or any app that depends on one.
FAQ
Does Retry now connect to anything?
No. An attempt waits 600 ms behind a spinner and is then refused, with the error typed in the file (ECONNREFUSED, against a documentation address), so a viewer can run the whole schedule without anything happening. To wire it, open your connection where the code says so, keep the busy state until it answers, and on success take the person to the page they wanted; keep the schedule and the refusal text for failures.
Does the countdown start by itself?
Never on load. It starts when the visitor turns Retry automatically on, runs for one gap, makes the attempt and starts the next gap, so at most five waits (62 seconds in all) and one timer at a time. Turning the switch off stops it, Retry now skips the rest of a wait, and after the fifth attempt the switch turns off by itself. A screen reader hears a sentence ("8 seconds until the next attempt") instead of the digits, and with reduced motion the ticking digits are replaced by the length of the wait.
How do I change the waits?
Edit GAPS, in seconds. The segments are drawn in proportion to them, the total and the count of attempts are derived, and the cells under the bar follow. Exponential backoff doubles the wait up to a ceiling; adding jitter in your client stops many clients retrying in the same second, which a typed schedule can't show.
How can you tell an attempt that was made from the next one without color?
By the fill and the word: a solid segment and "Refused" for an attempt made, an outlined segment and "Next" for the one that is coming, a dashed segment and "Waiting" for the rest. The weight of the words follows the same order. The page uses no status color.
Is it usable with a keyboard and a screen reader?
Tab reaches Retry now and the switch. A busy button disables itself, which drops keyboard focus, so when an attempt you started ends, focus moves to the result line, which is a polite status message ("Attempt 2 of 5 refused. The next one waits 8 seconds."). Attempts that the timer starts speak the same line without moving focus.
What status should this page return?
A 503, with a Retry-After header when you have an honest estimate, so browsers and monitoring treat it as an outage and not as content. The page can't set it; your server or framework does. Don't show hostnames, credentials or the connection string, which is why the cells show counts only.