Optimizing bundles size when using Lotties

You may notice that when using BrandLoadingScreen component, the lottie-web package is imported lazily. This package is a dependency of the lottie-react library that we use to render Lottie files.

There are several reports mentioning that lottie-web is quiet big, so their developers have created a "light" version of it, that only supports some of the features (Link).

If your use case of lottie-react library is not too complex and this light version covers your needs, you can patch their library to import the lottie-web functionalities from lottie-web/build/player/lottie_light instead. This will reduce the size of the library considerably.

You can refer to this example patch generated by using yarn patch to understand how to update the lottie-react library. There is also a pull request in their GitHub repository where you can see the required diff in the lottie-react source code.