Before the Data Arrives: Four States, and the Dash That Replaces Them

What does a screen draw before the data arrives?

Most shipping UIs answer with a shrug: they only know how to draw the happy path. While the network is in flight, while the list comes back empty, while App Store Connect returns a 409 — the view that only checks for .loaded draws nothing useful. The bug does not look like a crash. It looks like a quiet dash.

So this bench puts that shrug next to a panel that refuses it.

One phase, two panels

Both columns read the same InboxPhase. That is the whole experiment. The fetch is fake — ManifestInbox.fetch sleeps, then returns — but the phase value is real shared state, and both panels re-render from it.

enum InboxPhase: Equatable {
  case loading(elapsedMs: Int)
  case empty
  case failed(String)
  case loaded([ManifestRow])
}

Four cases. Not two. A boolean isLoading cannot express "the server answered and there is nothing to show," and it cannot carry the error string a retry button needs. The phase is the UI contract.

At 1,093 ms into a pinned loading run, the right panel is honest: spinner, FETCHING, the live counter. The left panel — the control — prints ignored loading 1093ms under a dash. Same phase. One branch.

The control: if case .loaded

/// The broken version. One `if case`, no else branch worth designing.
private struct LoadedOnlyPanel: View {
  let phase: InboxPhase
 
  var body: some View {
    Group {
      if case .loaded(let rows) = phase {
        ManifestList(rows: rows, tint: Lab.rose)
      } else {
        // Silence. No spinner, no empty copy, no error text.
        VStack(spacing: 8) {
          Text("—")
          Text("no .loaded yet")
          Text(phaseLabel) // "ignored loading…", "ignored empty", …
        }
      }
    }
  }
}

Empty is the one nobody designs

The empty reply resolved in 790 ms. The right panel does not pretend this is still loading, and it does not reuse the loaded list chrome with zero rows. It says 0 pending — an empty inbox is a destination, not a missing spinner.

The left panel labels itself ignored empty. That is the whole product failure mode: a successful round trip that the UI has no vocabulary for.

Failed carries a string, or it is useless

791 ms later the forced failure lands: ASC 409 · version already exists. The right panel keeps the message on screen — retry belongs here, next to the reason. The left panel still has a dash. A user facing that dash has nothing to report but "it didn't work."

case .failed:
  return .failed("ASC 409 · version already exists")

Throwing from async is how the modern concurrency model surfaces this — try await either yields a value or an error you must handle. Mapping that error into a phase case is what turns a compiler-checked throw into something a view can draw.

Loaded: both panels finally agree

790 ms of fake latency, then three rows on both sides:

Rose on the left, mint on the right — same data. The control was never incapable of drawing a list. It was incapable of drawing anything else.

What went wrong while building this

The first capture plan recorded in -slowmo with an eight-to-twelve-second loading scenario at the front of the cycle. The filmstrip came back as six frames of spinner and nothing else. Empty, failed, and loaded never appeared in the strip — not because the code was wrong, but because the loading beat ate the entire recording window.

That is why ManifestInbox.fetch now branches:

case .loading:
  if pinnedLoading {
    seconds = LabLaunchOptions.slowMotion ? 12 : 8  // stills need time
  } else {
    seconds = LabLaunchOptions.slowMotion ? 2.2 : 1.1  // cycles must finish
  }

Pinned -mode loading stays in flight long enough to photograph 1,093 ms. The free-running cycle keeps loading short so a twelve-second recording can actually reach the other three states. The chapter only exists because the first filmstrip contradicted the plan.

The switch that earns the mint border

private struct AllFourPanel: View {
  let phase: InboxPhase
 
  var body: some View {
    switch phase {
    case .loading(let ms):
      // ProgressView + "FETCHING" + "\(ms) ms"
    case .empty:
      // tray + "0 pending" + EMPTY STATE
    case .failed(let message):
      // FAILED + the real string
    case .loaded(let rows):
      ManifestList(rows: rows, tint: Lab.mint)
    }
  }
}

Exhaustive switch is not style. It is the compiler refusing to let you ship a fifth state you forgot to draw — the same pressure async throws puts on the fetch side.

Mini-exercise

In LoadedOnlyPanel, change the else branch to always show ProgressView() regardless of phase. Run the empty scenario (-mode empty). You will see a spinner forever on a fetch that already finished in ~790 ms — proof that "always show loading chrome" is not a substitute for an empty case.

Challenges

1. Drive the same two panels from a real URLSession call that can 404, and map HTTPURLResponse.statusCode into .failed without inventing a parallel errorMessage: String? beside a rows: [Row] array.
2. Add a fifth phase — .stale(rows) — for cached rows shown while a refresh is in flight. Watch the exhaustive switch force every call site to decide what "stale" looks like.
3. Cancel the in-flight Task when the bench disappears and assert the generation token prevents a late .loaded from painting after teardown.
4. Replace the live millisecond label with a determinate progress value from AsyncSequence byte counts — keep the control panel unchanged and photograph the difference again.
5. Write an XCUITest that fails if the LOADED ONLY panel ever exposes an accessibility element during .empty or .failed (it should stay silent; that silence is the bug).

Key Points

• A screen that fetches has four jobs to draw: loading, empty, failed, loaded — not "spinner then list."
• Share one phase value across panels so the control comparison is about rendering, not about divergent data.
• if case .loaded is how happy-path UIs ship; they look correct in the one state reviewers see.
• Empty is a successful answer of zero, not a slow load — 0 pending at 790 ms in this bench.
• Failed must carry a string (here ASC 409 · version already exists at **791 ms`) or retry is theatre.
• Mid-flight evidence: 1,093 ms on the pinned loading still; both counters matched across the control label and the mint panel.
• Exhaustive switch on the phase is the UI half of async throws — forgotten cases become compile errors.
• Capture plans lie until you watch the filmstrip; an oversized loading beat produced six spinner frames and forced the latency split between pinned and cycling runs.

Next up: cancellation — two lists that fetch on appear, one wired with .task (cancels on disappear) and one with .onAppear { Task { … } } (does not). Navigate away and back, and only one work counter climbs.