[HOLD for payment 2023-11-21] Migrate Lottie animations from bundle to app assets

[muttmuure]

Problem

Lottie animation resources are bundled along the main js bundle. They constitute around 5M of 29M bundle in release mode which is significant. The issue with including such resources in a bundle is that this data needs to be parsed and allocated (these objects will also be quite large and require a tons of allocations because of their structure) which slows down the startup time.

All of that only happens such that this object can be serialized to string and parsed again by the native Lottie code. The source of the issue is the fact Lottie assets are imported using bundler import statement much like you do with other resources like images.

Solution

The fix is to change the way these files are imported and allow Lottie load them directly from the app assets using resource link.

[kosmydel]

Hey, probably solving the above issue will cover this issue as well:

• [$500] [HOLD for payment 2023-11-21] [Tracking] Start using DotLottie animation assets instead of lottie JSON #26857

[kosmydel]

Hey, I am from Software Mansion. I am going to handle this issue.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[roryabraham]

This is done, but caused a few issues which maybe warranted broader discussion than they got. Namely:

• mWeb - The animation is not loading at all when use is offline #31236
• [HOLD for payment 2024-01-03] Settings - Animation in Settings is not smooth: background comes first then the animation #31196

I think we should consolidate those discussions into this issue and discuss potential solutions.

[roryabraham]

Copied from another issue, but some thoughts:

• We need to finish getting browser-level image caching set up in [HOLD for payment 2024-03-29] [HOLD for payment 2024-03-26] [$250] [Feature] RNW Image: Add support for http properties in source #12603, and make sure it works for .lottie assets too.
• Maybe we could get an SVG snapshot of each animation that's inlined in the HTML and display that while the lottie animation is loading
• Or maybe we can find a way to either inline or preload .lottie assets. If we could preload them like we do with fonts when the page loads that could be a good way to address these problem
• Someday we could also look at setting up service workers in our app to build better cross-session browser caching of all assets.

I think if we get good caching and potentially also preload .lottie assets like we do for our web fonts, we could eliminate most scenarios where a user could possibly see this type of bug or similar bugs where there's a delay before the animation loads.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.98-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Migrate animations to app assets and .lottie files #29975

If no regressions arise, payment will be issued on 2023-11-21. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @kosmydel does not require payment (Contractor)

[melvin-bot]

@kosmydel Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@kosmydel 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[kosmydel]

Hey @muttmuure @roryabraham, the Melvin-bot is angry at me. Can we close this issue?

[roryabraham]

Yeah, I think we can close this for now