Unify and refine viewer empty/loading/error states

Every viewer page (Timer, Countdown, Backstage, Studio, Timeline,
ProjectInfo, Operator) re-implemented the same data-loader flow by hand,
each with a hard-coded, unlocalized error string and drifting empty-state
styling. This centralizes that flow and elevates the shared presentation.

- Add ViewDataBoundary: a single component that renders the shared
  loading, error and optional no-data states from a QueryStatus, so every
  view handles them the same obvious way. Refactor all seven view loaders
  through it.
- Localize the error state via new common.fetch_error /
  common.fetch_error_hint keys (en + de/es/fr/it/pt), replacing the
  duplicated English literal with a two-line "Something went wrong /
  Please refresh the page" message.
- Elevate the shared Empty component: legible viewer-secondary color
  (was 10% white), responsive title sizing, softened illustration,
  optional supporting subtitle line, and a reduced-motion-safe fade-in.
- Unify loading: Cuesheet and the rundown table now use the animated
  Loader like every other view instead of an untranslated "Loading..."
  page.
- Tidy up: EmptyTableBody uses Empty's text prop, drop Countdown's
  now-redundant size override, and remove a stray semicolon rendered in
  the ProjectInfo empty state.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vq5XLTSQhU9ckZmCSW2SEr
This commit is contained in:
Claude
2026-07-25 12:06:25 +00:00
parent 2a890cf2b3
commit c070389937
23 changed files with 156 additions and 111 deletions
+2
View File
@@ -14,6 +14,8 @@ export const langEn = {
'common.started_at': 'Started At',
'common.time_now': 'Time now',
'common.no_data': 'No data',
'common.fetch_error': 'Something went wrong',
'common.fetch_error_hint': 'Please refresh the page',
'countdown.ended': 'Event ended at',
'countdown.running': 'Event running',
'countdown.group_running': 'Event in group running',