Merge pull request #9 from SayarB/sayar

fix: animation jitter fix
GDGVIT · Sep 6, 2023 · e50d2a3 · e50d2a3
2 parents ff16006 + 921614e
commit e50d2a3
Showing 1 changed file with 16 additions and 9 deletions.
diff --git a/web/components/StartAnim.tsx b/web/components/StartAnim.tsx
@@ -2,19 +2,26 @@
 
 import { Player, PlayerEvent } from "@lottiefiles/react-lottie-player";
 import LoadingAnimation from "../animations/loading_anim.json";
+import { useEffect } from "react";
 type Props = {
     onComplete: () => void
 }
-const StartAnim = ({ onComplete }: Props) => <div className="fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center"><Player
-    src={LoadingAnimation}
-    autoplay
-    style={{ minHeight: '100vh', minWidth: '100vw', aspectRatio: 16 / 9, zIndex: -1 }}
-    onEvent={(e) => {
-        if (e === PlayerEvent.Complete) {
-            onComplete()
+const StartAnim = ({ onComplete }: Props) => {
+
+    useEffect(() => {
+        const timeout = setTimeout(() => { onComplete() }, 15100)
+        return () => {
+            clearTimeout(timeout)
         }
-    }}
-/></div>
+    })
+
+    return <div className="fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-dark"><Player
+        src={LoadingAnimation}
+        autoplay
+        style={{ minHeight: '100vh', minWidth: '100vw', aspectRatio: 16 / 9, zIndex: 10, backgroundColor: "transparent" }}
+
+    /></div>
+}
 
 
 export default StartAnim;