Compact Widget Error Block for React

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.

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.

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.

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.

Dismissing the alert strip swaps it for a quiet line with Show again in the same box. Clear all empties the recent errors list and says so; it is quiet and still pressable when the list is empty. Neither saves anything, so a reload brings them back.

The widgets become one column that scrolls inside the window, the top bar keeps the heading and the button, and the recent errors list and the status line stay at the foot.