Add basic spinner

app/Canvas.tsx

@@ -22,25 +22,20 @@ export default function PmndrsCanvas() {
   const onPlay = useCanvasApi((state) => state.onPlay)
   const isLoaded = useCanvasApi((state) => state.isLoaded)
   const prevIsLoaded = useRef(isLoaded)
+  const setIsLazyLoaded = useCanvasApi((state) => state.setIsLazyLoaded)
 
   const pathname = usePathname()
   const isHome = pathname === '/'
   const isHomeRef = useRef(isHome)
   isHomeRef.current = isHome
 
+  const firstPath = useRef(pathname)
+
   const [showOverlay, setShowOverlay] = useState(false)
 
   useEffect(() => {
     let timeout: NodeJS.Timeout
 
-    // if (isHome.current) {
-    //   timeout = setTimeout(() => {
-    //     setShowOverlay(true)
-    //   }, 1000)
-    // } else {
-    //   setShowOverlay(false)
-    // }
-
     if (isHome) {
       if (!prevIsLoaded.current && !isLoaded) return
 
@@ -64,6 +59,12 @@ export default function PmndrsCanvas() {
     }
   }, [isLoaded, isHome])
 
+  useEffect(() => {
+    if (firstPath.current !== '/') {
+      setIsLazyLoaded(true)
+    }
+  }, [setIsLazyLoaded])
+
   const [props, springApi] = useSpring(() => ({
     opacity: 0,
   }))
@@ -172,18 +173,21 @@ function SubscribeToFrameloop() {
 type CanvasApi = {
   isPaused: boolean
   isLoaded: boolean
+  isLazyLoaded: boolean
   pause: () => void
   play: () => void
   onPauseCallbacks: (() => void)[]
   onPlayCallbacks: (() => void)[]
   onPause: (callback: () => void) => () => void
   onPlay: (callback: () => void) => () => void
   setIsLoaded: (isLoaded: boolean) => void
+  setIsLazyLoaded: (isLazyLoaded: boolean) => void
 }
 
 export const useCanvasApi = create<CanvasApi>((set, get) => ({
   isPaused: true,
   isLoaded: false,
+  isLazyLoaded: false,
   onPauseCallbacks: [],
   onPlayCallbacks: [],
   onPause: (callback) => {
@@ -211,4 +215,5 @@ export const useCanvasApi = create<CanvasApi>((set, get) => ({
     onPlay.forEach((fn) => fn())
   },
   setIsLoaded: (isLoaded) => set({ isLoaded }),
+  setIsLazyLoaded: (isLazyLoaded) => set({ isLazyLoaded }),
 }))

app/layout.tsx

@@ -12,6 +12,7 @@ import { Analytics, AnalyticsConfig } from 'pliny/analytics'
 import { SearchConfig, SearchProvider } from 'pliny/search'
 import { ThemeProviders } from './theme-providers'
 import dynamic from 'next/dynamic'
+import { Spinner } from '@/components/Spinner'
 
 const inter = Inter({
   subsets: ['latin'],
@@ -104,6 +105,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <Analytics analyticsConfig={siteMetadata.analytics as AnalyticsConfig} />
           <div className="relative z-[0]">
             <PmndrsCanvas />
+            <Spinner />
             <SectionContainer>
               <div className="flex h-screen flex-col justify-between font-sans">
                 <SearchProvider searchConfig={siteMetadata.search as SearchConfig}>

components/Spinner.tsx

@@ -0,0 +1,26 @@
+'use client'
+import { useSpring, a } from '@react-spring/web'
+import { useCanvasApi } from 'app/Canvas'
+import { useEffect } from 'react'
+
+export function Spinner() {
+  const isLoaded = useCanvasApi((state) => state.isLoaded)
+  const isLazyLoaded = useCanvasApi((state) => state.isLazyLoaded)
+
+  const [props, springApi] = useSpring(() => ({ opacity: isLazyLoaded ? 0 : 1 }))
+
+  useEffect(() => {
+    if (isLoaded) {
+      springApi.start({ opacity: 0 })
+    }
+  }, [isLoaded, springApi])
+
+  return (
+    <a.div
+      className="pointer-events-none fixed flex h-screen w-screen select-none place-content-center items-center"
+      style={props}
+    >
+      <div className="m-[100px auto] animate-rotateplane h-14 w-14 bg-gray-800 dark:bg-white" />
+    </a.div>
+  )
+}

tailwind.config.js

@@ -15,6 +15,22 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
+      animation: {
+        rotateplane: 'rotateplane 1.2s infinite ease-in-out',
+      },
+      keyframes: {
+        rotateplane: {
+          '0%': {
+            transform: 'perspective(120px) rotateX(0deg) rotateY(0deg)',
+          },
+          '50%': {
+            transform: 'perspective(120px) rotateX(-180.1deg) rotateY(0deg)',
+          },
+          '100%': {
+            transform: 'perspective(120px) rotateX(-180deg) rotateY(-179.9deg)',
+          },
+        },
+      },
       lineHeight: {
         11: '2.75rem',
         12: '3rem',