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
@@ -18,8 +18,7 @@ export default function EmptyTableBody({ handleAddNew }: EmptyTableBodyProps) {
<tbody className={style.emptyContainer}>
<tr>
<td colSpan={99} className={style.emptyCell}>
<Empty injectedStyles={{ marginTop: '5vh' }} />
<span className={style.text}>{text}</span>
<Empty text={text} injectedStyles={{ marginTop: '5vh' }} />
{handleAddNew && (
<div className={style.inline}>
<Button onClick={() => handleAddNew(SupportedEntry.Event)} variant='primary' size='large'>