Smooth channel loading: single-surface timeline state machine

[wesbillman]

Problem

Switching channels showed the loading skeleton "multiple times" with a vertical shake, then the messages shook/faded when the skeleton cleared. Goal (from #weird-ui-flicker-and-loading): show loading, then show messages — one surface at a time, buttery smooth.

Root cause

Two thrash engines, both around the skeleton:

1. Multiple skeleton surfaces. The historical full-pane ViewLoadingFallback data branch in ChannelScreen could swap a differently-laid-out skeleton in front of MessageTimeline's own skeleton — overlapping skeleton regions on screen at once.
2. The reveal animation restarted on every commit. MessageTimeline used SkeletonReveal with loading={isLoading || isDeferredListPending}. useDeferredValue re-defers on every new messages identity while events stream in, so isDeferredListPending blipped pending→list→pending across commits. Each blip re-fired SkeletonReveal's useLayoutEffect reset + rAF crossfade + relative↔absolute layout swap → the skeleton re-appeared/re-pulsed (vertical shake) and content faded in on reveal.

Fix — one timeline state machine, one visible surface

A strict, derived single-surface model. Exactly one of skeleton | direct-message-intro | channel-intro | empty | list renders at any time. No overlap, no crossfade, no animation on the skeleton.

• ChannelScreen: remove the dead full-pane channel-loading branch; always mount ChannelPane (real header/composer/timeline) and pass isTimelineLoading down. Keep the per-channel monotonic loading latch and the scroll-freeze.
• MessageTimeline: drop SkeletonReveal entirely; render plain conditional surfaces driven by a new pure selectTimelineSurface(...). Both hard-loading and the deferred catch-up window map to skeleton, so the same TimelineSkeleton node stays mounted across the hold — no remount flash, no reveal restart, zero gap before rows. Scroll/search/load-older are gated on the same skeleton state so rows don't shake during catch-up; skeleton row estimate ignores uncommitted messages so its height doesn't jump.

Invariants (enforced by unit tests)

1. Exactly one surface renders — no overlap.
2. Loading is monotonic per channel (latch).
3. The loading surface is a plain conditional, not SkeletonReveal — no layout-effect reset, no rAF, no absolute↔relative swap.
4. Deferred-pending never restarts the skeleton — it holds the same static frame, then swaps to list once.
5. Stable container geometry across loading→list (min-h-[18rem]).

Tests

• New selectTimelineSurface table in timelineSnapshot.test.mjs (loading + pending both → skeleton; live rows win; empty picks exactly one intro/empty surface).
• Existing timelineLoadingState.test.mjs latch cases retained.
• Full desktop unit suite: 902/902.
• pnpm typecheck, pnpm check, pnpm build all clean (pre-existing chunk warnings only).

Note: the "buttery smooth" feel is best confirmed in a running build (fast A→B→A switching, empty channel, throttled relay) — the suite proves the logic/invariants.

Co-authored by Pinky (MessageTimeline state machine + selectTimelineSurface) and Brain (ChannelScreen full-pane removal, loading latch, scroll-freeze, integration). Closes the channel-load flicker reported in #weird-ui-flicker-and-loading.