added AnimationPlayer

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}
+    />
+}

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;
+}