Decouple lottie-web in onboarding components

[elycheea]

Follow up to #3959.

The original issue was to investigate issues with tree shaking. In our initial review, we weren’t able to replicate the issue where lottie-web was not being shaken, but we’ve continued to see reports of inflated builds¹.

The problem

Adopters of our library would like to leverage our package without inflated bundle sizes that have resulted from the inclusion of lottie-web as a dependency. In some cases, lottie-web remains even after tree-shaking, which has resulted in developers taking a more fragile approach to preventing it from being bundled².

More recently, we’ve seen additional contributions³ which include Lottie animations. Before we introduce these new patterns, we’d like to explore new ways to allow our components and library to support these animations while reducing the overhead, risk, and performance issues passed on to our consuming teams.

Solution

In a basic way, decoupling lottie-web from the set of onboarding components — however, this poses some risk to teams that may already be consuming them using Lottie animations. In recent reviews of our telemetry, Coachmarks and InterstitialScreen are known to be among the higher used onboarding components, however, they are still considered experimental/preview components.

Currently, lottie-web is imported in SteppedAnimatedMedia which is in turn used in

• CoachmarkOverlayElements
• CoachmarkStack
• InlineTip
• and InterstitialScreen

All of these components accept a media prop which will leverage the SteppedAnimatedMedia when passed filePaths.

Tasks

Preview Give feedback

1. Work with @jlongshore and @paul-balchin-ibm to discuss potential plans
2. Test dynamic import of media prop #6243
   0 of 3
   needs: investigation needs: prototype role: dev +3
   
3. Decouple lottie-web dependency from our repo #6366
   component: Coachmark component: InlineTip component: Interstitial screen role: dev type: enhancement 💡 +5
   
4. Review and deprecate lottie-web and SteppedAnimatedMedia in 1H2025 #6434
   component: Coachmark component: InlineTip component: Interstitial screen role: dev +4
   

Footnotes

1. Kindly documented by @Mikadv: https://ibm-studios.slack.com/archives/C013ZTX0N6B/p1725456070249159?thread_ts=1725374600.890359&cid=C013ZTX0N6B ↩

2. Also from @asfordmatt: https://ibm-studios.slack.com/archives/C013ZTX0N6B/p1725983300345619?thread_ts=1725374600.890359&cid=C013ZTX0N6B ↩

3. Animated headers from @glapadre @mikeolasov @marion-bruells ↩

[tomsoal]

Any update on this issue please? We've had security vulnerabilities flagged up in our UI code due to the presence of eval() in lottie-web on this line. This specific example is pointing to this CWE

If this package was decoupled from within this repo we could see this vulnerability disappear which would save us having to make any temporary workarounds - thank you

[elycheea]

@tomsoal We were currently targeting February for its actual removal, but think we can escalate this with the CWE. 🙏 CC @ljcarot @matthewgallo @amal-k-joy

[ljcarot]

This currently is unassigned @elycheea Do you want to assign it to someone?