Merge branch 'remove-lottie' into 'next'

Add new Sonar effect in vanilla CSS (and remove Lottie)

See merge request soapbox-pub/soapbox-fe!1258

app/soapbox/components/lottie.tsx

@@ -1,28 +0,0 @@
-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.tsx

@@ -10,7 +10,7 @@ import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 import { openModal } from '../../../actions/modals';
 import { Button, Form, HStack, IconButton, Input, Tooltip } from '../../../components/ui';
 
-import Pulse from './pulse';
+import Sonar from './sonar';
 
 import type { AxiosError } from 'axios';
 
@@ -72,8 +72,8 @@ const Header = () => {
       <nav className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' aria-label='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 justify-center relative w-36'>
-            <div className='hidden sm:block absolute z-0 left-0 top-0 -ml-[330px] -mt-[400px]'>
-              <Pulse />
+            <div className='hidden sm:block absolute z-0 -top-24 -left-6'>
+              <Sonar />
             </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

@@ -1,38 +0,0 @@
-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;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Sonar = () => (
+  <div className='relative'>
+    <div className='relative w-48 h-48 bg-white rounded-full'>
+      <div className='animate-sonar-scale-4 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
+      <div className='animate-sonar-scale-3 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
+      <div className='animate-sonar-scale-2 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
+      <div className='animate-sonar-scale-1 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
+    </div>
+  </div>
+);
+
+export default Sonar;

app/styles/truth.scss

@@ -252,13 +252,6 @@ body,
     display: flex;
     flex-direction: column;
 
-    .lottie-wrapper {
-      position: absolute;
-      z-index: 0;
-      margin-left: -410px;
-      margin-top: -40px;
-    }
-
     .header-container {
       position: relative;
       padding-top: 10px;

package.json

@@ -133,7 +133,6 @@
     "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",

tailwind.config.js

@@ -47,6 +47,30 @@ module.exports = {
         'bg-shape-1': true,
         'bg-shape-2': true,
       }),
+      animation: {
+        'sonar-scale-4': 'sonar-scale-4 3s linear infinite',
+        'sonar-scale-3': 'sonar-scale-3 3s 0.5s linear infinite',
+        'sonar-scale-2': 'sonar-scale-2 3s 1s linear infinite',
+        'sonar-scale-1': 'sonar-scale-1 3s 1.5s linear infinite',
+      },
+      keyframes: {
+        'sonar-scale-4': {
+          from: { opacity: '0.4' },
+          to: { opacity: 0, transform: 'scale(4)' },
+        },
+        'sonar-scale-3': {
+          from: { opacity: '0.4' },
+          to: { opacity: 0, transform: 'scale(3.5)' },
+        },
+        'sonar-scale-2': {
+          from: { opacity: '0.4' },
+          to: { opacity: 0, transform: 'scale(3)' },
+        },
+        'sonar-scale-1': {
+          from: { opacity: '0.4' },
+          to: { opacity: 0, transform: 'scale(2.5)' },
+        },
+      },
     },
   },
   plugins: [

yarn.lock

@@ -7166,11 +7166,6 @@ 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.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"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"