feat(BrandLoadingScreen): improve lottie animations

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

@@ -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';
+

README.md

@@ -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
 

doc/lottie.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.

package.json

@@ -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": [