States
Loading, refreshing, empty and error states that keep the block's layout.
Each block takes a load function that returns a promise, and the useBlockData hook tracks its status. Use a skeleton only for the first load. When data is already on screen, keep it in place while it refreshes, dimmed, so the layout doesn't jump.
Skeleton
Placeholders sized to match the loaded stats, so nothing shifts when the data arrives. Select Reload to see them again.
Refresh
The chart stays in place at reduced opacity while it refreshes, with an updating indicator in the header.
Empty
A filtered table with no matching rows explains why it's empty and offers a way out.
- Status:Refunded
- Region:Asia Pacific
No orders match these filters
Remove a filter, or clear them all to see every order.
Error
When loading fails, the card says what went wrong and offers to try again. This example fails on every other attempt.
Page Header
The top of a page. A heading with actions, section tabs, a record's header with a back link and facts, and a list page's search.
AI Assistant
A chat panel docked beside a page, a conversation with code and feedback, questions about a usage card with the cost of each answer, and a failed reply with retry.