Skip to content

fix(replay): hide duration while chunks are progressively loading#297

Open
ayushjhanwar-png wants to merge 1 commit into
mainfrom
fix/replay-duration-progressive-load
Open

fix(replay): hide duration while chunks are progressively loading#297
ayushjhanwar-png wants to merge 1 commit into
mainfrom
fix/replay-duration-progressive-load

Conversation

@ayushjhanwar-png

Copy link
Copy Markdown

Problem

When opening a session replay, the duration display jumps around as chunks load progressively:

  • T=0: `2:11 / 2:57` (first batch only — 50 chunks)
  • T=2s: `2:11 / 5:30` (after second batch fetched)
  • T=5s: `2:11 / 14:58` (final, all chunks in)

The growing duration looks like a bug — users assume the recording is shorter than it is and try to scrub, only to have the timeline expand under them. Reported during 30% rollout monitoring.

Root cause

`ReplayPlayer` initializes with the first 50-chunk batch and shows `getMetaData().totalTime` from that subset. `ReplayChunkLoader` then recursively fetches remaining batches in the background, calls `addEvent()` for each event, and triggers `refreshDuration()` after each batch. `refreshDuration()` re-reads `getMetaData().totalTime` and updates state — so the displayed duration visibly climbs as more events arrive.

Fix

Track a `chunksLoaded: boolean` in `ReplayContext`:

  • `ReplayChunkLoader` sets it true when its recursive fetch finishes (`hasMore === false` OR error)
  • A new `ReplayChunksLoadedFlag` component covers the edge case where the first batch already contains everything (loader never mounts) — sets the flag immediately
  • `ReplayTime` shows `…` while `chunksLoaded` is false, then renders the final duration in one step

The duration is still computed and refreshed the same way underneath; we just hide the in-progress value from the user.

Files

  • `replay-context.tsx` — added `chunksLoaded` state + setter, reset on destroy
  • `index.tsx` — `ReplayChunkLoader` flips the flag on completion; new `ReplayChunksLoadedFlag` for single-batch sessions
  • `replay-controls.tsx` — `ReplayTime` shows `…` while loading

Test plan

  • Open a long session (e.g. `2a8a077c-...` with 7,583 chunks): duration shows `…` while loading, then jumps to ~7+ hours once everything is in
  • Open a short session (`<50` chunks): duration appears immediately without flicker
  • Open a session with a load failure mid-stream: duration eventually appears (we set the flag in `.catch` too)

… loaded

The player initializes with the first batch of chunks and then
ReplayChunkLoader recursively fetches the rest, calling addEvent() +
refreshDuration() after each. This causes the displayed duration to
visibly grow (e.g. 2:57 → 5:30 → 14:58) as more chunks arrive, which
looks like a bug to users.

Tracks chunksLoaded in ReplayContext; ReplayChunkLoader flips it true
when recursion finishes. If the first batch already contains the whole
session (hasMore=false), a small ReplayChunksLoadedFlag component sets
it immediately so the UI never sits in a loading state for short
sessions. The duration in ReplayTime renders as "…" until everything
is in, then switches to the final value in one step.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant