No Dashboards Empty State Block for React

The dashboards live in the page's state: reload and the list is empty, and Start over empties it without a reload. Nothing is saved, and the skeletons are drawings, not charts. To wire it for real, create the dashboard with your API where the code says so, add its row from the response, and render your own widgets in the main area in place of the drawn skeleton.

A dashboards page lives inside an app, so the block is the app's own frame: a list pane, a top bar with the page's heading and its one action, and a main area that scrolls on its own. The list pane is plain markup rather than the catalog Sidebar, because it only has to list dashboards: a row for each, a dashed one for a new dashboard. The window keeps its height whatever you do, and only the main area scrolls.

The three cards are real radio buttons with the card as their label, so the arrow keys move between them and the button's label follows ("Create a chart dashboard"). A layout that has been made is marked Created and can't be chosen again in this demo; the next free one is preselected. With all three made the button says so and stays in the tab order.

Tab runs through the list pane (each dashboard, then New dashboard, then Start over), the button in the top bar and the layout cards. The page you are on is marked as the current page in the list, a polite status line says what was created, and the drawings are hidden from screen readers because the names and sentences say the same.

The list pane gives way to a select above the main area that holds New dashboard and each dashboard you made, with Start over beside it once something has changed. The three layout cards stack and the main area scrolls inside the window; the button stays in the top bar.

No. The window is a fixed height from the medium breakpoint (46rem) and a shorter one on phones (36rem), the list scrolls in its pane and the main area in its own region, so creating dashboards never moves the page around the window.