Replace react-lottie with lottie-web, move that giant Pulse animation into a chunk

app/soapbox/components/lottie.tsx

@@ -0,0 +1,28 @@
+import lottie from 'lottie-web';
+import React, { useEffect, useRef } from 'react';
+
+interface LottieProps {
+  animationData: any
+  width: number
+  height: number
+}
+
+/** Wrapper around lottie-web */
+// https://github.com/chenqingspring/react-lottie/issues/139
+const Lottie: React.FC<LottieProps> = ({ animationData, width, height }) => {
+  const element = useRef<HTMLDivElement>(null);
+  const lottieInstance = useRef<any>();
+
+  useEffect(() => {
+    if (element.current) {
+      lottieInstance.current = lottie.loadAnimation({
+        animationData,
+        container: element.current,
+      });
+    }
+  }, [animationData]);
+
+  return <div style={{ width, height }} ref={element} />;
+};
+
+export default Lottie;

app/soapbox/features/public_layout/components/header.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import Lottie from 'react-lottie';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, Redirect } from 'react-router-dom';
 
@@ -8,10 +7,11 @@ import { logIn, verifyCredentials } from 'soapbox/actions/auth';
 import { fetchInstance } from 'soapbox/actions/instance';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 
-import animationData from '../../../../images/circles.json';
 import { openModal } from '../../../actions/modals';
 import { Button, Form, HStack, IconButton, Input, Tooltip } from '../../../components/ui';
 
+import Pulse from './pulse';
+
 const messages = defineMessages({
   home: { id: 'header.home.label', defaultMessage: 'Home' },
   login: { id: 'header.login.label', defaultMessage: 'Log in' },
@@ -20,13 +20,6 @@ const messages = defineMessages({
   password: { id: 'header.login.password.label', defaultMessage: 'Password' },
 });
 
-const defaultOptions = {
-  renderer: 'svg',
-  loop: true,
-  autoplay: true,
-  animationData: animationData,
-};
-
 const Header = () => {
   const dispatch = useDispatch();
   const intl = useIntl();
@@ -75,12 +68,7 @@ const Header = () => {
         <div className='w-full py-6 flex items-center justify-between border-b border-indigo-500 lg:border-none'>
           <div className='flex items-center relative'>
             <div className='hidden sm:block absolute z-0 left-0 top-0 -ml-[330px] -mt-[400px]'>
-              <Lottie
-                options={defaultOptions}
-                height={800}
-                width={800}
-                isClickToPauseDisabled
-              />
+              <Pulse />
             </div>
             <Link to='/' className='z-10'>
               <img alt='Logo' src={logo} className='h-6 w-auto cursor-pointer' />

app/soapbox/features/public_layout/components/pulse.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+
+const LottieAsync = () => {
+  return import(/* webpackChunkName: "lottie" */'soapbox/components/lottie');
+};
+
+const fetchAnimationData = () => {
+  return import(/* webpackChunkName: "lottie" */'images/circles.json');
+};
+
+/** Homepage pulse animation chunked to not bloat the entrypoint */
+const Pulse: React.FC = () => {
+  const [animationData, setAnimationData] = useState<any>(undefined);
+
+  useEffect(() => {
+    fetchAnimationData()
+      .then(({ default: json }) => {
+        setAnimationData(json);
+      })
+      .catch(console.error);
+  });
+
+  if (animationData) {
+    return (
+      <BundleContainer fetchComponent={LottieAsync}>
+        {Component => (
+          <Component animationData={animationData} width={800} height={800} />
+        )}
+      </BundleContainer>
+    );
+  } else {
+    return null;
+  }
+};
+
+export default Pulse;

package.json

@@ -130,6 +130,7 @@
     "line-awesome": "^1.3.0",
     "localforage": "^1.10.0",
     "lodash": "^4.7.11",
+    "lottie-web": "^5.9.2",
     "mark-loader": "^0.1.6",
     "marky": "^1.2.1",
     "mini-css-extract-plugin": "^1.6.2",
@@ -154,7 +155,6 @@
     "react-immutable-pure-component": "^2.0.0",
     "react-inlinesvg": "^2.3.0",
     "react-intl": "^5.0.0",
-    "react-lottie": "^1.2.3",
     "react-motion": "^0.5.2",
     "react-notification": "^6.8.4",
     "react-otp-input": "^2.4.0",

yarn.lock

@@ -3062,14 +3062,6 @@ babel-preset-jest@^27.5.1:
     babel-plugin-jest-hoist "^27.5.1"
     babel-preset-current-node-syntax "^1.0.0"
 
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
@@ -3704,11 +3696,6 @@ core-js-pure@^3.16.0:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.17.3.tgz#98ea3587188ab7ef4695db6518eeb71aec42604a"
   integrity sha512-YusrqwiOTTn8058JDa0cv9unbXdIiIgcgI9gXso0ey4WgkFLd3lYlV9rp9n7nDCsYxXsMDTjA4m1h3T348mdlQ==
 
-core-js@^2.4.0:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
-  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
-
 core-js@^3.1.3, core-js@^3.15.2:
   version "3.18.0"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.0.tgz#9af3f4a6df9ba3428a3fb1b171f1503b3f40cc49"
@@ -7138,10 +7125,10 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lottie-web@^5.1.3:
-  version "5.7.13"
-  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.7.13.tgz#c4087e4742c485fc2c4034adad65d1f3fcd438b0"
-  integrity sha512-6iy93BGPkdk39b0jRgJ8Zosxi8QqcMP5XcDvg1f0XAvEkke6EMCl6BUO4Lu78dpgvfG2tzut4QJ+0vCrfbrldQ==
+lottie-web@^5.9.2:
+  version "5.9.2"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.9.2.tgz#38db3f3f3655802c465d725a359fc9d303e31335"
+  integrity sha512-YnoJIKCdKIzno8G/kONOpADW6H/ORZV9puy3vWOhWmHtbDcpISFGVvvdKKa2jwAcsVqXK4xSi0po730kAPIfBw==
 
 lower-case@^2.0.2:
   version "2.0.2"
@@ -8807,14 +8794,6 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-lottie@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/react-lottie/-/react-lottie-1.2.3.tgz#8544b96939e088658072eea5e12d912cdaa3acc1"
-  integrity sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==
-  dependencies:
-    babel-runtime "^6.26.0"
-    lottie-web "^5.1.3"
-
 react-motion@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
@@ -9121,11 +9100,6 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
 regenerator-runtime@^0.12.0:
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"