shadcn.io is not affiliated with official shadcn/ui
Compact Widget Error Block for React Aria
A dashboard window whose widgets fail on their own: orders that fail twice before loading, revenue from 3 of 5 sources with a details disclosure, a dismissible alert error, a recent errors list, and one Shine Button that retries what failed.
Installation
Overview
Keep one failure from taking the whole screen with this compact widget error window for React with React Aria. It's a dashboard window for Meterhurst, a dashboard tool: a framed, fixed-height window on plus-marked corners made with Guides, with the app's own top bar holding the heading and the one Shine Button, Retry failed (2). Under it a 2 by 2 grid of fixed-size widgets on shared hairlines. Orders failed to load; its Retry fails once more (Failed twice) and the next one loads a figure. Revenue shows a figure from 3 of 5 sources, and a Collapsible Details names the two that are missing; each retry brings one in. Alerts carries an error strip of its own, which can be dismissed and shown again, and Sync is fine. At the foot a list of recent errors with Clear all. Every state keeps its widget's size, so nothing moves when one changes. For any dashboard whose widgets load on their own.
FAQ
Are the retries real, and what stays in the window?
No: they are a script. Each retry shows skeletons for under a second and then follows a typed outcome, so a viewer can run the whole story: Orders fails again once and loads the second time, Revenue gains one source per retry, and after two presses nothing is left to retry. Nothing is requested. In your app, run each widget's own request from run and keep a widget's state in the widget.
What does the count on the button mean?
It is the number of widgets that still have a problem, worked out from their states: Orders until it has loaded, Revenue until all five sources are in. At zero the button stays in place, quiet, and says "Nothing to retry" when pressed, instead of disappearing or moving the bar.
Why does nothing move when a widget changes state?
The window has a fixed height and every widget a fixed size; each state is drawn in the same box, with skeletons at the loaded content's size, and the details disclosure opens inside its widget and scrolls there. Only the grid and the error list scroll, never the page.
How is each widget's state shown without colour?
As a shape and a word in an outline badge: a cross and Failed, a dash and Partial, a tick and Loaded or OK, a spinner and Loading. The one status colour is on the failed Orders icon; every message is in the text colour.