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.

Author: marcoskolodny

.yarn/cache/lottie-react-patch-76bf043167-c04f89cb7b.zip

@@ -0,0 +1,51 @@
+diff --git a/build/index.d.ts b/build/index.d.ts
+index d7bcde667d3db9510ee67e27ca4e6ecdd0641e14..9b28fd02c458e524107ed3f61cd945fecc0eeeed 100644
+--- a/build/index.d.ts
++++ b/build/index.d.ts
+@@ -1,6 +1,6 @@
+ /// <reference types="react" />
+-import { AnimationDirection, AnimationSegment, AnimationItem, RendererType, AnimationConfigWithData, AnimationEventName } from 'lottie-web';
+-export { default as LottiePlayer } from 'lottie-web';
++import { AnimationDirection, AnimationSegment, AnimationItem, RendererType, AnimationConfigWithData, AnimationEventName } from 'lottie-web/build/player/lottie_light';
++export { default as LottiePlayer } from 'lottie-web/build/player/lottie_light';
+ import * as react from 'react';
+ import react__default, { RefObject, MutableRefObject, AnimationEventHandler, ReactElement, CSSProperties } from 'react';
+ 
+diff --git a/build/index.es.js b/build/index.es.js
+index a2d9d48661a41bfb5c44df246eec19935d8a1162..1394d1116bd5a4b86ee2fdbbb9f096ad3824207f 100644
+--- a/build/index.es.js
++++ b/build/index.es.js
+@@ -1,5 +1,5 @@
+-import lottie from 'lottie-web';
+-export { default as LottiePlayer } from 'lottie-web';
++import lottie from 'lottie-web/build/player/lottie_light';
++export { default as LottiePlayer } from 'lottie-web/build/player/lottie_light';
+ import React, { useState, useRef, useEffect } from 'react';
+ 
+ function _iterableToArrayLimit(arr, i) {
+diff --git a/build/index.js b/build/index.js
+index ad6dbb0947b4a342383436808f2be3ab7161eaf3..3111e99f9e55e85786d971b931aedfaca419a617 100644
+--- a/build/index.js
++++ b/build/index.js
+@@ -2,7 +2,7 @@
+ 
+ Object.defineProperty(exports, '__esModule', { value: true });
+ 
+-var lottie = require('lottie-web');
++var lottie = require('lottie-web/build/player/lottie_light');
+ var React = require('react');
+ 
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+diff --git a/build/index.umd.js b/build/index.umd.js
+index 05a46ac14be5f01ef400c7dda874f4d4646d8f82..077e99122143581e0154794d8ca2419881e1bd84 100644
+--- a/build/index.umd.js
++++ b/build/index.umd.js
+@@ -1,6 +1,6 @@
+ (function (global, factory) {
+-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lottie-web'), require('react')) :
+-  typeof define === 'function' && define.amd ? define(['exports', 'lottie-web', 'react'], factory) :
++  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lottie-web/build/player/lottie_light'), require('react')) :
++  typeof define === 'function' && define.amd ? define(['exports', 'lottie-web/build/player/lottie_light', 'react'], factory) :
+   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["lottie-react"] = {}, global.Lottie, global.React));
+ })(this, (function (exports, lottie, React) { 'use strict';
+ 

.yarn/patches/lottie-react-npm-2.4.0-d4d95c55aa.patch

@@ -115,6 +115,7 @@ Start prototyping interfaces with Mistica components in the
 - [Analytics](https://github.com/Telefonica/mistica-web/blob/master/doc/analytics.md)
 - [Fonts](https://github.com/Telefonica/mistica-web/blob/master/doc/fonts.md)
 - [Testing notes](https://github.com/Telefonica/mistica-web/blob/master/doc/testing.md)
+- [Using Lottie](https://github.com/Telefonica/mistica-web/blob/master/doc/lottie.md)
 
 ## Development
 

README.md

@@ -0,0 +1,17 @@
+# 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](https://github.com/airbnb/lottie-web/wiki/Lottie-Light)).
+
+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](../.yarn/patches/lottie-react-npm-2.4.0-d4d95c55aa.patch) generated by
+using `yarn patch` to understand how to update the `lottie-react` library. There is also
+[a pull request](https://github.com/Gamote/lottie-react/pull/86) in their GitHub repository where you can see
+the required diff in the `lottie-react` source code.

doc/lottie.md

@@ -200,7 +200,8 @@
         "react-dom": "18.2.0",
         "@types/react": "^18.0.26",
         "@types/react-dom": "^18.0.10",
-        "@testing-library/dom": "^8.19.1"
+        "@testing-library/dom": "^8.19.1",
+        "lottie-react@^2.4.0": "patch:lottie-react@npm%3A2.4.0#./.yarn/patches/lottie-react-npm-2.4.0-d4d95c55aa.patch"
     },
     "packageManager": "yarn@3.6.1",
     "workspaces": [