Add new Sonar effect in vanilla CSS (and remove Lottie) See merge request soapbox-pub/soapbox-fe!1258revert-5af0e40a
commit
be0136b835
File diff suppressed because one or more lines are too long
@ -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;
|
|
@ -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;
|
|
@ -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;
|
Loading…
Reference in new issue