From fb9a7d5f61798651e4a1d82f89aab8f9acf6f681 Mon Sep 17 00:00:00 2001
From: Oluwatobi Bamidele <teebams49@gmail.com>
Date: Mon, 7 Oct 2024 23:01:26 +0100
Subject: [PATCH] fix: convert sphere animation to user lottie web rather than
 react lottie

---
 .../App/Splash/SpiningSphere/index.tsx        | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/App/Splash/SpiningSphere/index.tsx b/src/components/App/Splash/SpiningSphere/index.tsx
index b5fb30e28..b9a501ffc 100644
--- a/src/components/App/Splash/SpiningSphere/index.tsx
+++ b/src/components/App/Splash/SpiningSphere/index.tsx
@@ -1,26 +1,37 @@
-import { useEffect, useState } from 'react'
-import Lottie from 'react-lottie'
+import lottie, { AnimationItem } from 'lottie-web'
 import { Flex } from '~/components/common/Flex'
-import * as preloadData from './preloader.json'
+
+import { useEffect, useRef } from 'react'
+import preloadData from './preloader.json'
 
 export const SphereAnimation = () => {
-  const [isReady, setIsReady] = useState(false)
+  const lottieRef = useRef<AnimationItem | null>(null)
 
   useEffect(() => {
-    setIsReady(true)
+    const container = document.getElementById('lottie-sphere-animation')
+
+    if (container) {
+      lottieRef.current = lottie.loadAnimation({
+        container,
+        animationData: preloadData,
+        loop: true,
+        autoplay: true,
+        rendererSettings: {
+          preserveAspectRatio: 'xMidYMid slice',
+        },
+      })
+    }
 
     return () => {
-      setIsReady(false)
+      if (lottieRef.current) {
+        lottieRef?.current?.destroy()
+      }
     }
   }, [])
 
-  if (!isReady) {
-    return <></>
-  }
-
   return (
-    <Flex style={{ width: '167px', height: '167px', opacity: 0.5 }}>
-      <Lottie
+    <Flex id="lottie-sphere-animation" style={{ width: '167px', height: '167px', opacity: 0.5 }}>
+      {/* <Lottie
         height={167}
         options={{
           loop: true,
@@ -31,7 +42,7 @@ export const SphereAnimation = () => {
           },
         }}
         width={167}
-      />
+      /> */}
     </Flex>
   )
 }