@ai-stack/payloadcms
Version:
<p align="center"> <img alt="Payload AI Plugin" src="assets/payload-ai-intro.gif" width="100%" /> </p>
101 lines (100 loc) • 3.25 kB
JavaScript
// @ts-nocheck
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useRef, useState } from 'react';
import styles from './icons.module.css';
const LottieAnimation = ({ isLoading = false })=>{
const svgRef = useRef(null);
const [animations, setAnimations] = useState([]);
useEffect(()=>{
const svg = svgRef.current;
if (!svg) return;
const animateTransform = (element, keyframes)=>{
const animation = element.animate(keyframes, {
direction: 'alternate',
duration: 1000,
easing: 'ease-in-out',
iterations: Infinity
});
return animation;
};
// Animate Group 2 (Rectangle)
const rectangle = svg.querySelector('#group2');
const rectangleAnimation = animateTransform(rectangle, [
{
transform: 'translate(0, 0) scale(1)'
},
{
transform: 'translate(0, 0) scale(2.54)'
},
{
transform: 'translate(0, 0) scale(1)'
}
]);
// Animate Group 3 (Triangle)
const triangle = svg.querySelector('#group3');
const triangleAnimation = animateTransform(triangle, [
{
transform: 'translate(-69.5px, 77.5px) scale(1)'
},
{
transform: 'translate(-70px, 73px) scale(0.36)'
},
{
transform: 'translate(-69.5px, 77.5px) scale(1)'
}
]);
setAnimations([
rectangleAnimation,
triangleAnimation
]);
// Clean up animations on unmount
return ()=>{
rectangleAnimation.cancel();
triangleAnimation.cancel();
};
}, []);
useEffect(()=>{
if (isLoading) {
animations.forEach((animation)=>animation.play());
} else {
animations.forEach((animation)=>animation.pause());
}
}, [
isLoading,
animations
]);
return /*#__PURE__*/ _jsx("span", {
style: {
left: '3px',
position: 'relative',
top: '-6px'
},
children: /*#__PURE__*/ _jsxs("svg", {
height: "41",
ref: svgRef,
viewBox: "-250 -250 500 500",
width: "41",
children: [
/*#__PURE__*/ _jsx("g", {
id: "group2",
children: /*#__PURE__*/ _jsx("rect", {
className: styles.color_fill,
height: "41",
width: "41",
x: "-20.5",
y: "-20.5"
})
}),
/*#__PURE__*/ _jsx("g", {
id: "group3",
children: /*#__PURE__*/ _jsx("path", {
className: styles.color_fill,
d: "M48.5 57.5L48.5 -57.5L-49.5 -1.093L48.5 57.5Z"
})
})
]
})
});
};
export default LottieAnimation;
//# sourceMappingURL=LottieAnimation.js.map