From 0c02d671ea34274d185115c341717bed95d4a3c8 Mon Sep 17 00:00:00 2001
From: SayarB <sayarbhattacharyya03@gmail.com>
Date: Mon, 30 Oct 2023 13:54:33 +0530
Subject: [PATCH 1/2] fix: animation removed on rerender

---
 web/app/layout.tsx           |  3 ++-
 web/app/page.tsx             |  4 ++--
 web/components/StartAnim.tsx | 11 ++++++-----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 76c98de..bb9be2f 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,8 +1,9 @@
+
 import './globals.css'
 import { Unbounded } from 'next/font/google'
 import localFont from "next/font/local"
 
-const unbounded = Unbounded({ subsets: ['latin'], variable: '--font-unbounded' })
+const unbounded = Unbounded({ subsets: ['latin'], variable: '--font-unbounded', display: 'swap' })
 const neue_machina = localFont({
   src: '/NeueMachina-Regular.otf',
   variable: '--font-neuemachina'
diff --git a/web/app/page.tsx b/web/app/page.tsx
index 4d156ac..4b706b1 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -127,8 +127,8 @@ export default function Home() {
   }, [hoveringKey])
 
 
-  return <main id='main-thing' ref={mainRef} className='h-[100vh] overflow-scroll overflow-x-hidden snap-y'>
-    <StartAnim onComplete={() => { setStartAnimationComplete(true) }} />
+  return <main id='main-thing' ref={mainRef} className='h-[100vh] overflow-auto overflow-x-hidden snap-y'>
+    {!startAnimationComplete && <StartAnim onComplete={() => { setStartAnimationComplete(true) }} />}
     {
       startAnimationComplete &&
       <>
diff --git a/web/components/StartAnim.tsx b/web/components/StartAnim.tsx
index 6265196..1378506 100644
--- a/web/components/StartAnim.tsx
+++ b/web/components/StartAnim.tsx
@@ -2,11 +2,12 @@
 
 import { Player, PlayerEvent } from "@lottiefiles/react-lottie-player";
 import LoadingAnimation from "../animations/loading_anim.json";
-import { useEffect } from "react";
+import { CSSProperties, useEffect } from "react";
 type Props = {
-    onComplete: () => void
+    onComplete: () => void;
+    style?: CSSProperties
 }
-const StartAnim = ({ onComplete }: Props) => {
+const StartAnim = ({ onComplete, style }: Props) => {
 
     useEffect(() => {
         const timeout = setTimeout(() => { onComplete() }, 15100)
@@ -15,10 +16,10 @@ const StartAnim = ({ onComplete }: Props) => {
         }
     })
 
-    return <div className="fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-dark"><Player
+    return <div className="fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-dark -z-10" style={style} ><Player
         src={LoadingAnimation}
         autoplay
-        style={{ minHeight: '100vh', minWidth: '100vw', aspectRatio: 16 / 9, zIndex: 10, backgroundColor: "transparent" }}
+        style={{ minHeight: '100vh', minWidth: '100vw', aspectRatio: 16 / 9, zIndex: 0, backgroundColor: "transparent" }}
 
     /></div>
 }

From 9716bba017880568cd76600153207cc81bd51179 Mon Sep 17 00:00:00 2001
From: SayarB <sayarbhattacharyya03@gmail.com>
Date: Mon, 30 Oct 2023 14:05:35 +0530
Subject: [PATCH 2/2] fix: starting anim bug fix

---
 web/app/page.tsx             | 2 +-
 web/components/StartAnim.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/app/page.tsx b/web/app/page.tsx
index 7062fd2..878e70b 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -153,7 +153,7 @@ export default function Home() {
 
 
   return <main id='main-thing' ref={mainRef} className='h-[100vh] overflow-auto overflow-x-hidden snap-y'>
-    <StartAnim onComplete={() => { setStartAnimationComplete(true) }} />
+    {!startAnimationComplete && <StartAnim onComplete={() => { setStartAnimationComplete(true) }} />}
     {
       startAnimationComplete &&
       <>
diff --git a/web/components/StartAnim.tsx b/web/components/StartAnim.tsx
index bc95bc0..ae69c9d 100644
--- a/web/components/StartAnim.tsx
+++ b/web/components/StartAnim.tsx
@@ -16,7 +16,7 @@ const StartAnim = ({ onComplete, style }: Props) => {
         }
     })
 
-    return <div className="fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-dark -z-10" style={style} ><Player
+    return <div className="fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center overflow-hidden bg-dark -z-10" style={style} ><Player
         src={LoadingAnimation}
         autoplay
         style={{ minHeight: '100vh', minWidth: '100vw', aspectRatio: 16 / 9, zIndex: 0, backgroundColor: "transparent" }}