fix: Stepper animation with react-spring ^10.0.1

[adrienzheng-cb]

Summary

• Fixes a visual bug where visited step progress bars become invisible when a consumer upgrades react-spring to v10
• Changes the useSprings initializer in both web and mobile Stepper to use from instead of a direct value, preventing stale declarative updates from resetting animation state

Context

A customer reported that after upgrading @react-spring/web from v9 to v10, the Stepper component's visited step progress bars disappear. This is caused by a known upstream bug introduced in react-spring v10.

Root cause

In v10, the internal updates variable in useSprings was changed from a local variable (recreated fresh each render) to a useRef (persists across renders) for React 19 compatibility (PR #2368). This causes the initial declarative update to be re-applied on every re-render via the layout effect, even when deps haven't changed.

Our Stepper initialized springs with progress: 0, which react-spring interprets as to: { progress: 0 }. On every re-render in v10, this stale to target is re-applied, resetting visited progress bars back to 0% before the imperative useEffect can restore them.

Fix

Changing progress: 0 to from: { progress: 0 } ensures the initializer only sets the starting position without declaring an animation target. When v10 re-applies the stale update, it harmlessly updates from instead of resetting the current animation value.

The immediate prop was also removed from the initializer since the existing useEffect already passes it on every .start() call.

This fix is backward compatible with react-spring v9 — the useEffect already handles all animation state transitions including mount (via previousActiveStepIndex starting at -1).

This fixed have been verified against both react-spring v9.7.4 (version used in cds-web and cds-mobile) and v10.0.2 (consumer version)

UI changes

Before

Screen.Recording.2026-04-07.at.2.25.57.PM.mov

After

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2026-04-08.at.20.45.13.mov

Screen.Recording.2026-04-08.at.8.45.31.PM.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

Update react-spring package version to ^10.0.2 in mobile and web repo, and then run storybook and mobile-app

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	✅ 1/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

⚠️ Ignored Reviews (2)

Reviewer	Reason
sverg-cb	Old or outdated review
sverg-cb	Review missing MFA

✅ CODEOWNERS

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

[adrienzheng-cb]

@cb-ekuersch /github-repo-manager skill was really helpful. For some reason it was a lot more effective than me asking agent to research package version difference directly.

[sverg-cb]

thank you so much for the screen recordings!

[github-actions]

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