Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(BrandLoadingScreen): improve lottie animations (#1235)
In order to verify the improvements, I've modified locally the size-stats example and used bundle analizer to compare the results. 1. Used an online tool to compress the lottie JSON files for Vivo-new logo. This improved in 20% the total size of the lotties: - Before: ![MicrosoftTeams-image](https://github.com/user-attachments/assets/e75682f6-4957-495c-8236-d806f0c62882) - After: ![MicrosoftTeams-image (1)](https://github.com/user-attachments/assets/80f5ad0c-4ba6-4e38-b96d-d51fce67fc0b) 2. I noticed that the main bottleneck was using `lottie-react` to render the lotties. This lib imports `lottie-web`, and that library is quiet heavy. [Some people recommended](airbnb/lottie-web#1184 (comment)) importing `lottie-light` from `lottie-web` and using it as replacement for the default one. What I've done is copying a minimized version of ([lottie-react](https://github.com/Gamote/lottie-react/blob/main/src/components/Lottie.ts) into our repository and adapted it to use `lottie-light` instead of `lottie-web`. This caused a pretty big improvement (over 50% of the total size of the lib). - Before: ![MicrosoftTeams-image (2)](https://github.com/user-attachments/assets/57d48ee0-bacc-49d0-9522-c51712366637) - After: ![MicrosoftTeams-image (3)](https://github.com/user-attachments/assets/135ae454-7abb-4735-a465-5bbdc446e4f3) In total, by using the exact same example in size-stats, we can see that the bundles size has been reduced by over 160kb: - Before: ![MicrosoftTeams-image (4)](https://github.com/user-attachments/assets/aaf590cd-5f0d-4df6-874f-69e61f488529) - After: ![MicrosoftTeams-image (5)](https://github.com/user-attachments/assets/9b79fc91-f568-4070-b319-34fab818d936) ## 🗒️ Note The size stats comment in this PR only shows the improvements caused by compressing the vivo lotties. The ones obtained by replacing the lottie library are not visible because the example page in the size-stats doesn't use a BrandLoadingScreen component (and the lotties are imported lazily). Refer to the images I've attached in this description to see the impact.
- Loading branch information
e7dc87f
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Deploy preview for mistica-web ready!
✅ Preview
https://mistica-q463x0mvm-flows-projects-65bb050e.vercel.app
Built with commit e7dc87f.
This pull request is being automatically deployed with vercel-action