From 862d345e26eb5a5eb48bf7fb143b0aed1218988b Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 19 Apr 2022 17:03:28 -0500 Subject: [PATCH] Replace react-lottie with lottie-web, move that giant Pulse animation into a chunk --- app/soapbox/components/lottie.tsx | 28 ++++++++++++++ .../public_layout/components/header.js | 18 ++------- .../public_layout/components/pulse.tsx | 38 +++++++++++++++++++ package.json | 2 +- yarn.lock | 34 ++--------------- 5 files changed, 74 insertions(+), 46 deletions(-) create mode 100644 app/soapbox/components/lottie.tsx create mode 100644 app/soapbox/features/public_layout/components/pulse.tsx diff --git a/app/soapbox/components/lottie.tsx b/app/soapbox/components/lottie.tsx new file mode 100644 index 000000000..7c1c8ed55 --- /dev/null +++ b/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 = ({ animationData, width, height }) => { + const element = useRef(null); + const lottieInstance = useRef(); + + useEffect(() => { + if (element.current) { + lottieInstance.current = lottie.loadAnimation({ + animationData, + container: element.current, + }); + } + }, [animationData]); + + return
; +}; + +export default Lottie; diff --git a/app/soapbox/features/public_layout/components/header.js b/app/soapbox/features/public_layout/components/header.js index 4a6af284d..87ea49568 100644 --- a/app/soapbox/features/public_layout/components/header.js +++ b/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 = () => {
- +
Logo diff --git a/app/soapbox/features/public_layout/components/pulse.tsx b/app/soapbox/features/public_layout/components/pulse.tsx new file mode 100644 index 000000000..6aba78c32 --- /dev/null +++ b/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(undefined); + + useEffect(() => { + fetchAnimationData() + .then(({ default: json }) => { + setAnimationData(json); + }) + .catch(console.error); + }); + + if (animationData) { + return ( + + {Component => ( + + )} + + ); + } else { + return null; + } +}; + +export default Pulse; diff --git a/package.json b/package.json index efdaac696..e6415ef0e 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index baf32288c..429d7dc85 100644 --- a/yarn.lock +++ b/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"