From a69e09a2ba0b19652d53412acd2154a4e4f6c2d1 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Mon, 19 Jun 2023 19:19:24 +0000
Subject: [PATCH] added `AnimationPlayer`

---
 .../src/components/AnimationPlayer/index.jsx  | 41 +++++++++++++++++++
 .../src/components/AnimationPlayer/index.less | 10 +++++
 2 files changed, 51 insertions(+)
 create mode 100644 packages/app/src/components/AnimationPlayer/index.jsx
 create mode 100644 packages/app/src/components/AnimationPlayer/index.less

diff --git a/packages/app/src/components/AnimationPlayer/index.jsx b/packages/app/src/components/AnimationPlayer/index.jsx
new file mode 100644
index 00000000..f05136ae
--- /dev/null
+++ b/packages/app/src/components/AnimationPlayer/index.jsx
@@ -0,0 +1,41 @@
+import React from "react"
+import Lottie from "lottie-react"
+import classnames from "classnames"
+
+import "./index.less"
+
+function animationFetcher(url) {
+    return fetch(url)
+        .then((res) => res.json())
+}
+
+export default ({
+    animation,
+    src,
+    loop = false,
+    className = [],
+}) => {
+    const [animationData, setAnimationData] = React.useState(animation)
+
+    React.useEffect(() => {
+        if (!animation) {
+            animationFetcher(src)
+                .then((animationData) => {
+                    setAnimationData(animationData)
+                })
+        }
+    }, [])
+
+    if (!animationData) {
+        return React.Fragment
+    }
+
+    return <Lottie
+        className={classnames(
+            "animation-player",
+            ...className
+        )}
+        animationData={animationData}
+        loop={loop}
+    />
+}
\ No newline at end of file
diff --git a/packages/app/src/components/AnimationPlayer/index.less b/packages/app/src/components/AnimationPlayer/index.less
new file mode 100644
index 00000000..217c41ef
--- /dev/null
+++ b/packages/app/src/components/AnimationPlayer/index.less
@@ -0,0 +1,10 @@
+.animation-player {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+
+    transition: all 150ms ease-in-out;
+}
\ No newline at end of file