fix: mobile scrubber initial load glitch

[hcopp]

What changed? Why?

This PR improves the mobile scrubber initial render. This is already solved on web by not rendering when value isn't set (see DefaultScrubberBeacon and ScrubberBeaconLabelGroup).

Note this is separate from #570 which occurred each time the user started scrubbing.

Root cause (required for bugfixes)

For initial load, scrubber beacon and label were rendering at a y value of 0. This has been fixed by defaulting to null and for scrubber beacon rendering in the correct spot to start and for the label not rendering until we know the location.

Most of the time this isn't a problem since we have an initial animation, however removing this and having a large screen (such as multiple charts) can cause this to happen where the value isn't calculated until 1 frame later.

The last issue one could see here is that the labels spawn in their initial location and then animate but this would be an extra step where we have to render them visually but with 0 opacity. I believe this current solution suffices and that teams will be adopting animations over time as we continue to iterate on customization.

UI changes

iOS Old	iOS New
ScrubberBefore.mov	ScrubberAfter.mov

Testing

How has it been tested?

• Unit tests
• Interaction tests
• Pseudo State tests
• Manual - Web
• Manual - Android (Emulator / Device)
• Manual - iOS (Emulator / Device)

Testing instructions

Edit Scrubber.stories.tsx on mobile to add animate={false} to both of PercentageBeaconLabels charts.

Then go to 'Scrubber' > 'Percentage Beacon Labels' (example 8 of 16) and compare master to this branch (keeping the animate={false} change).

Illustrations/Icons Checklist

Required if this PR changes files under packages/illustrations/** or packages/icons/**

• verified visreg changes with Terran (include link to visreg run/approval)
• all illustration/icons names have been reviewed by Dom and/or Terran

Change management

type=routine
risk=low
impact=sev5

automerge=false

[cb-heimdall]

✅ Heimdall Review Status

Requirement	Status	More Info
Reviews	✅ 2/1	Denominator calculation Show calculation 1 if user is bot 0 1 if user is external 0 2 if repo is sensitive 0 From .codeflow.yml 1 Additional review requirements Show calculation Max 0 0 From CODEOWNERS 1 Global minimum 0 Max 1 1 1 if commit is unverified 0 Sum 1
CODEOWNERS	✅ See below

✅ CODEOWNERS

Code Owner	Status	Calculation
ui-systems-eng-team	✅ 2/1	Denominator calculation Additional CODEOWNERS Requirement Show calculation Sum 0 0 From CODEOWNERS 1 Sum 1

[github-actions]

https://percy.io/d424b72f/web/cds-mobile-visreg-03c97426/builds/48343090