From 22734070e312bac8c97690b38da29176adda69b5 Mon Sep 17 00:00:00 2001
From: Kris Baumgartner <kjbaumgartner@gmail.com>
Date: Sat, 20 Jul 2024 13:57:11 -0700
Subject: [PATCH] Add basic spinner

---
 app/Canvas.tsx         | 21 +++++++++++++--------
 app/layout.tsx         |  2 ++
 components/Spinner.tsx | 26 ++++++++++++++++++++++++++
 tailwind.config.js     | 16 ++++++++++++++++
 4 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 components/Spinner.tsx

diff --git a/app/Canvas.tsx b/app/Canvas.tsx
index df660dc85..95ba48946 100644
--- a/app/Canvas.tsx
+++ b/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,6 +173,7 @@ function SubscribeToFrameloop() {
 type CanvasApi = {
   isPaused: boolean
   isLoaded: boolean
+  isLazyLoaded: boolean
   pause: () => void
   play: () => void
   onPauseCallbacks: (() => void)[]
@@ -179,11 +181,13 @@ type CanvasApi = {
   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 }),
 }))
diff --git a/app/layout.tsx b/app/layout.tsx
index 6138f0cab..aa65e7427 100644
--- a/app/layout.tsx
+++ b/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}>
diff --git a/components/Spinner.tsx b/components/Spinner.tsx
new file mode 100644
index 000000000..6476f8c6a
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index ac3e8a2bc..9ff34dc1e 100644
--- a/tailwind.config.js
+++ b/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',