Error loading page
The page tries to load again, fails, and points to refresh.
Not quite it? Ask for a variation
Install
Writes one React component into components/illos. Nothing else to install.
npx shadcn@latest add https://illos.dev/r/flat/error-loading-page.jsonOr hand it to your agent
Claude Code, Cursor, Codex and any other coding agent can add it from the prompt.
How it moves
- a report could not load, and an alert shows.
- a spinner turns while the page tries again.
- the alert returns, and a ring marks the refresh button.
Where it fits
For any web app: the screen a report or page shows when it fails to load, a dashboard tile that timed out, or the docs page on what to do when data will not load. The spinner turning while the app tries again, then the alert and the ring on refresh, is honest about the failure and points to the one thing to try. As a spot it fits above a heading such as We couldn't load this page and a Try again button. It is free to copy and pairs with Page not found, Report unavailable and Query timeout.
Pairs well with Page not found, Report unavailable and Query timeout.
On your site
Read where product illustrations go, how to place an animated SVG and how to keep animations fast.
For developers
- File size
- 2.2 KB gzipped
- Motion
- Plays once, 3.6 s, then holds
- Reduced motion
- Shows a still
- File
- error-loading-page.svg