The visit · §5.10

Stage timeline

The whole visit at a glance, with "you are here" as the one glow on the screen.

Theme
Contrast
Language
Motion
Text size

Code

<StageTimeline lang={lang} steps={timelineStepsFromView({ current, entries, t, upcoming })} t={t} timezone={site.timezone} />

Accessibility

  • An ordered list; the current step has aria-current="step".
  • Each step reads "Step 4 of 7, current: Tests under way. Started 7:12 p.m."
  • Advances are announced politely; the breathing dot is static under reduced motion.

Usage

Do

  • Keep the current step expanded with its estimate and what happens now.
  • Fold past steps after three.

Don't

  • Don't show steps that won't happen ("admitted" for most patients).
  • Don't use a check for a result: a done step is not good news.

Platforms

Web
apps/web/components/edflow/stage-timeline.tsx, apps/web/components/edflow/live-dot.tsx, apps/web/components/edflow/time.tsx
iOS
Custom SwiftUI view (never glass)
Android
Custom Compose Column + Canvas connectors