fix: render Lottie dynamically

src/components/App/Splash/SpiningSphere/index.tsx

@@ -1,20 +1,37 @@
+import { useEffect, useState } from 'react'
 import Lottie from 'react-lottie'
 import { Flex } from '~/components/common/Flex'
 import preloadData from './preloader.json'
 
-export const SphereAnimation = () => (
-  <Flex style={{ width: '167px', height: '167px', opacity: 0.5 }}>
-    <Lottie
-      height={167}
-      options={{
-        loop: true,
-        autoplay: true,
-        animationData: preloadData,
-        rendererSettings: {
-          preserveAspectRatio: 'xMidYMid slice',
-        },
-      }}
-      width={167}
-    />
-  </Flex>
-)
+export const SphereAnimation = () => {
+  const [isReady, setIsReady] = useState(false)
+
+  useEffect(() => {
+    setIsReady(true)
+
+    return () => {
+      setIsReady(false)
+    }
+  }, [])
+
+  if (!isReady) {
+    return <></>
+  }
+
+  return (
+    <Flex style={{ width: '167px', height: '167px', opacity: 0.5 }}>
+      <Lottie
+        height={167}
+        options={{
+          loop: true,
+          autoplay: true,
+          animationData: preloadData,
+          rendererSettings: {
+            preserveAspectRatio: 'xMidYMid slice',
+          },
+        }}
+        width={167}
+      />
+    </Flex>
+  )
+}

src/components/App/Splash/index.tsx

@@ -10,6 +10,7 @@ import { useDataStore } from '~/stores/useDataStore'
 import { colors, formatSplashMessage, formatStatsResponse } from '~/utils'
 import { AnimatedTextContent } from './animated'
 import { initialMessageData, Message } from './constants'
+import { SphereAnimation } from './SpiningSphere'
 
 export const Splash = () => {
   const [message, setMessage] = useState<Message>(initialMessageData)
@@ -69,7 +70,7 @@ export const Splash = () => {
   return (
     <SplashWrapper>
       <Wrapper align="center" direction="row" justify="center">
-        {/* <SphereAnimation /> */}
+        <SphereAnimation />
         <Flex style={{ color: colors.white }}>
           <TitleWrapper>
             <Text className="title">{appMetaData?.title}</Text>