---
title: "Data views · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/data-views
updated: 2026-10-20
licence: "All rights reserved"
---

# Data views

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

> 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.

**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`.

## Required

- [Give every data view all its states](https://agentwranglers.se/playbook/app-ui/data-views/every-data-state): Give 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](https://agentwranglers.se/playbook/app-ui/data-views/empty-states): Show 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](https://agentwranglers.se/playbook/app-ui/data-views/error-in-place): When 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](https://agentwranglers.se/playbook/app-ui/data-views/loading-without-flicker): Show 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](https://agentwranglers.se/playbook/app-ui/data-views/partial-results): When 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](https://agentwranglers.se/playbook/app-ui/data-views/disabled-with-reason): When a control can't be used yet, say why in visible text next to it, and what would make it work.

- Previous: [Styles and components](https://agentwranglers.se/playbook/app-ui/styles-and-components)
- Next: [Dates and numbers](https://agentwranglers.se/playbook/app-ui/dates-and-numbers)
- [All chapters](https://agentwranglers.se/playbook/app-ui)