feat: add splash page

constant.ts

@@ -1 +1,3 @@
 export const SERVICE_POLLING_INTERVAL = 2000
+
+export const SPLASH_SCREEN_DELAY = 2000

src/App.tsx

@@ -1,11 +1,12 @@
 import './App.css'
 import { useEffect } from 'react'
 import { Route, Routes, useNavigate } from 'react-router-dom'
-import { NextUIProvider, Spinner } from '@nextui-org/react'
-import { useZeroTierStore } from './store/zerotier.ts'
-import { useAppStore } from './store/app.ts'
-import { SERVICE_POLLING_INTERVAL } from '../constant.ts'
+import { NextUIProvider } from '@nextui-org/react'
+import { useZeroTierStore } from './store/zerotier'
+import { useAppStore } from './store/app'
+import { SERVICE_POLLING_INTERVAL } from '../constant'
 import { useNotification } from './components/NotificationBar'
+import Splash from './pages/Splash'
 import Home from './pages/Home'
 import Dev from './pages/Dev'
 
@@ -54,21 +55,12 @@ function App() {
   return (
     <NextUIProvider navigate={navigate}>
       <div className="text-foreground">
-        {
-          isLoading
-            ? (
-              <div className="w-screen h-screen flex justify-center items-center bg-background z-[100]">
-                <Spinner size="lg" />
-              </div>
-            )
-            : (
-              <Routes>
-                <Route path="/" element={<Home />} />
-                {import.meta.env.DEV && <Route path="/dev" element={<Dev />} />}
-                <Route path="*" element={<Home />} />
-              </Routes>
-            )
-        }
+        <Routes>
+          <Route path="/" element={<Splash />} />
+          <Route path="/home" element={<Home />} />
+          {import.meta.env.DEV && <Route path="/dev" element={<Dev />} />}
+          <Route path="*" element={<Home />} />
+        </Routes>
       </div>
     </NextUIProvider>
   )

src/pages/Home.tsx

@@ -1,11 +1,12 @@
+import { useState } from 'react'
 import { Button, useDisclosure } from '@nextui-org/react'
 import classNames from 'classnames'
-import { ServiceStatus } from '../typings/enum.ts'
-import { useAppStore } from '../store/app.ts'
-import { useZeroTierStore } from '../store/zerotier.ts'
-import { HistoryIcon } from '../components/Icon.tsx'
-import LogsModal from '../components/LogsModal.tsx'
-import { useState } from 'react';
+import { motion } from 'framer-motion'
+import { ServiceStatus } from '../typings/enum'
+import { useAppStore } from '../store/app'
+import { useZeroTierStore } from '../store/zerotier'
+import { HistoryIcon } from '../components/Icon'
+import LogsModal from '../components/LogsModal'
 
 function Home() {
   const {isAdmin} = useAppStore()
@@ -40,7 +41,12 @@ function Home() {
   )
 
   return (
-    <div className="w-full mt-28 flex flex-col justify-center items-center">
+    <motion.div
+      className="w-full mt-28 flex flex-col justify-center items-center"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: .5 }}
+    >
       <h1
         className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-[#f02fc2] to-[#6094ea]">
         ZeroTier Toolkit
@@ -77,7 +83,7 @@ function Home() {
         backdrop="blur"
         onOpenChange={onModalOpenChange}
       />
-    </div>
+    </motion.div>
   )
 }
 

src/pages/Splash.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import classNames from 'classnames'
+import { motion } from 'framer-motion'
+import { Image, Spinner } from '@nextui-org/react'
+import { useAppStore } from '../store/app'
+import { SPLASH_SCREEN_DELAY } from '../../constant'
+
+function Splash() {
+  const navigate = useNavigate()
+
+  const {isLoading} = useAppStore()
+
+  const [showSplash, setShowSplash] = useState(true)
+  const [showLoading, setShowLoading] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setShowSplash(false), SPLASH_SCREEN_DELAY)
+    return () => clearTimeout(timer)
+  }, [])
+
+  useEffect(() => {
+    if (!isLoading && !showSplash) {
+      navigate('/home', {replace: true})
+    } else if (isLoading && !showSplash) {
+      setShowLoading(true)
+    }
+  }, [isLoading, showSplash])
+
+  return (
+    <motion.div
+      className="w-screen h-screen flex flex-col justify-center items-center"
+      initial={{opacity: 0}}
+      animate={{opacity: 1}}
+      transition={{duration: .5}}
+    >
+      <div className={classNames([
+        'flex flex-col justify-center items-center ease-in-out duration-[1000ms]',
+        showLoading ? 'scale-85 -translate-y-12' : ''
+      ])}>
+        <div className="h-[130px]">
+          <Image
+            width={130}
+            alt="Logo"
+            src="/zerotier_orange.svg"
+          />
+        </div>
+        <h1 className="mt-6 text-4xl font-black text-[#ffb541]">
+          ZeroTier Toolkit
+        </h1>
+      </div>
+      <div className="h-0">
+        {
+          <Spinner
+            size="md"
+            className={classNames([
+              'transition-opacity delay-500',
+              showLoading ? 'opacity-100' : 'opacity-0'
+            ])}
+            color="warning"
+          />
+        }
+      </div>
+    </motion.div>
+  )
+}
+
+export default Splash