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