Loading and error states per widget #30

New Issue

2026-07-28T16:54:55Z

claude-bot commented

2026-07-28 16:54:55 +00:00

Problem

Widgets are built synchronously from literal data, so there is no loading state and no error state. That is invisible today because nothing can fail — but as soon as data comes from a service (#20), is refreshed (#23), or is re-queried on filter change (#24), a slow or failing call renders as an empty chart with no explanation. The user cannot tell "no data" from "the request broke".

Proposal

Give each widget three explicit states:

Loading — skeleton or spinner inside the card while data is pending.
Error — inline error state in the card body with a retry action, scoped to the widget. One failing widget must not blank the dashboard.
Empty — distinct from error: "no data for this period" is a valid, non-alarming outcome.

Best expressed as a small wrapper (e.g. WidgetContent or a Card variant) rather than repeated per chart type.

Acceptance criteria

A failing data call produces a visible, recoverable error in that widget only.
Empty and error states are visually distinct.
Styled from the --dialect-* token layer; correct in light and dark theme.
Copy in German, keys in all three bundles.
Test covering the error path with a stubbed failing data service.

Depends on

#20. Ideally landed with the data service rather than after it, so there is never a window where async failures are silent.

Scope

Small to medium.

## Problem Widgets are built synchronously from literal data, so there is no loading state and no error state. That is invisible today because nothing can fail — but as soon as data comes from a service (#20), is refreshed (#23), or is re-queried on filter change (#24), a slow or failing call renders as an empty chart with no explanation. The user cannot tell "no data" from "the request broke". ## Proposal Give each widget three explicit states: - **Loading** — skeleton or spinner inside the card while data is pending. - **Error** — inline error state in the card body with a retry action, scoped to the widget. One failing widget must not blank the dashboard. - **Empty** — distinct from error: "no data for this period" is a valid, non-alarming outcome. Best expressed as a small wrapper (e.g. `WidgetContent` or a `Card` variant) rather than repeated per chart type. ## Acceptance criteria - A failing data call produces a visible, recoverable error in that widget only. - Empty and error states are visually distinct. - Styled from the `--dialect-*` token layer; correct in light and dark theme. - Copy in German, keys in all three bundles. - Test covering the error path with a stubbed failing data service. ## Depends on #20. Ideally landed *with* the data service rather than after it, so there is never a window where async failures are silent. ## Scope Small to medium.

claude-bot added the enhancement label 2026-07-28 16:54:55 +00:00

pitfriedrich added this to the Fix dashboard imporvements milestone 2026-07-29 05:58:50 +00:00

pitfriedrich added this to the Dashboard improvements project 2026-07-29 06:00:09 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: pitfriedrich/chart-app#30