Detail state screen

The minimal frame a record-detail route shows while it has no record: the back button and one line of text, nothing else. React packages/ui/src/components/DetailStateScreen.tsx; it emits .pr / .pr-top / .pr-ico / .pr-name-top from apps/web/src/ds/person-record.css — the same header geometry as the loaded detail, so the back button does not move when the record arrives.

It existed as an identical copy-paste in nine detail pages before it became one component.

When to use

  • A record-detail route that is still fetching (Načítám…).
  • A record-detail route whose record does not exist or was deleted (Osoba nenalezena) — the only way on is back.

When not to use

  • A load that failed and can be retried — that is error-state, which offers the retry.
  • A record that loaded and has an empty section — that is empty-state inside that section.
  • A listing — a listing keeps its own frame and shows a skeleton in the body.

Anatomy

  • div.pr › div.pr-top › button.pr-ico (back arrow, title = backLabel, default Zpět) + span.pr-name-top (the title).
  • Props: title, onBack, backLabel.

Measured, identical across loading / loaded / not-found: header 49px tall, back button 30 × 30 at 12px from the left edge, title starting at 54px. That invariance is the whole point of the component.

Best practices

Do

  • Pair it with a skeleton body on load: the header now, the content shaped like the content that is coming.
  • Say what was not found, in the entity's own words (Obchod nenalezen).
  • Set backLabel when back does not lead to the previous page.

Don't

  • Add an action, an illustration or an explanation — this frame is deliberately two elements.
  • Use it for a retryable failure.
  • Rebuild it per detail page; that copy-paste is exactly what it replaced.
  • Render it on a route that does not load person-record.css — the classes come from there and it will render unstyled.

Content

  • Loading: Načítám….
  • Missing: <Entita> nenalezena / nenalezen, matching the gender of the entity.
  • error-state — the retryable failure.
  • empty-state — a section of a loaded record with nothing in it.
  • skeleton-line, skeleton-list — the body underneath.
  • Stories: components--detail-state-screen--default, --variants, --states, --composition.

Source: docs/loading/detail-state-screen.usage.md · GitLab