Agent WranglersData views
Every panel, list and chart that shows data has a loading, empty, error, partial and success state. Design each one, test each one, and never show a blank box.
- Required 3
- Recommended 3
Required
Give every data view all its states
RequiredGive every view that loads data a distinct state for loading, empty, error and success. Add partial when it combines sources. Render a designed screen for each.
Tell an empty start from an empty search
RequiredShow two different empty states. A new account with no records explains the feature and offers the first action. A search or filter with no matches names the filter and offers to clear it.
Show errors where the data should be
RequiredWhen data fails to load, show the error inside the view that failed, with a plain cause, a retry button and a reference. Keep any older data visible and marked as out of date.
Recommended
Show loading without flicker
RecommendedShow a loading indicator only when loading takes longer than 300 ms. Once shown, keep it for at least 500 ms. Reserve the final size, so nothing jumps.
Show what loaded when one part fails
RecommendedWhen a view combines several sources and one fails, show the parts that loaded and name the part that is missing.
Say why a control is unavailable
RecommendedWhen a control can't be used yet, say why in visible text next to it, and what would make it work.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/data-views.