Design: Show inactivity gaps between segments in mobile replays

[Jesse-Box]

Problem

Unlike the web, mobile SDKs create and send videos, rather than a series of events that can be reconstructed into a replay. The replayer for mobile replays attempts to stitch together these videos to play in a single, combined timeline. Due to the nature of mobile applications, there can be be gaps between each video segment. The user, for example, can switch to another app, causing this gap in a replay session. This adds a bit of complexity to try to handle it seamlessly and will likely (and already has) be a source of bugs. We can improve the UX by informing the user of these periods of inactivity and at the same time reduce complexity and bugs.

Acceptance Criteria

• If a user changes the current time index of the replay to be within the gaps duration, the current time index will skip to start of the next segment.
• The user can see a visual indicator that informs them why the current time index of the replay is "jumping"

[Jesse-Box]

@michellewzhang @billyvg @ryan953
Here's my first draft for visualising segment gaps within our replay event timeline

Figma
https://www.figma.com/design/LC8Uhws6ruiNYUkObfqcjv/Specs%3A-Segment-Gaps-in-Mobile-Replay?node-id=0%3A1&t=h0KelpMmV7vfnln5-1

Rewatch
https://sentry.rewatch.com/video/9vpkv400blmcroy3-mobile-segment-gap-specs-feedback-round-1 (edited)

[Jesse-Box]

Closing this ticket as the team is comfortable with the initial draft