feat: add link pending components

Author: arianrhodsandlot

src/pages/library/components/game-entry.tsx

@@ -9,22 +9,37 @@ export function GameEntry({ rom, width }) {
   const { data: cover, isLoading } = useRomCover(rom)
 
   return (
-    <Link className='block transition-transform' style={{ width: width || 'auto' }} to={`/library/rom/${rom.id}`}>
-      <div className='flex aspect-square size-full items-center justify-center'>
-        {isLoading ? <div className='size-4/5 rounded bg-zinc-200' /> : null}
+    <div className='relative'>
+      <Link
+        className='block'
+        style={{ width: width || 'auto' }}
+        to={`/library/rom/${rom.id}`}
+        unstable_pending={
+          <div className='z-1 absolute inset-0'>
+            <div className='grid h-4/5 w-full place-items-center'>
+              <div className='backdrop-blur-xs rounded-full bg-white/40 p-1.5'>
+                <span className='icon-[svg-spinners--180-ring] block size-6 text-[var(--theme)]' />
+              </div>
+            </div>
+          </div>
+        }
+      >
+        <div className='flex aspect-square size-full items-center justify-center'>
+          {isLoading ? <div className='size-4/5 rounded bg-zinc-200' /> : null}
 
-        {cover ? (
-          <img
-            alt={name}
-            className={clsx('max-w-4/5 max-h-full rounded object-contain drop-shadow-lg', {
-              rounded: cover.type === 'rom',
-            })}
-            src={cover.src}
-          />
-        ) : null}
-      </div>
+          {cover ? (
+            <img
+              alt={name}
+              className={clsx('max-w-4/5 max-h-full rounded object-contain drop-shadow-lg', {
+                rounded: cover.type === 'rom',
+              })}
+              src={cover.src}
+            />
+          ) : null}
+        </div>
 
-      <div className='mt-2 line-clamp-2 text-center text-sm font-semibold'>{name}</div>
-    </Link>
+        <div className='mt-2 line-clamp-2 text-center text-sm font-semibold'>{name}</div>
+      </Link>
+    </div>
   )
 }

src/pages/library/components/sidebar-link.tsx

@@ -3,14 +3,17 @@ import { Link } from 'waku/router/client'
 
 export function SidebarLink({ active = false, children, href }) {
   return (
-    <Link
-      className={clsx(
-        'mx-2 flex items-center gap-2 rounded px-4 py-2.5 font-semibold  transition-colors hover:bg-rose-900 hover:text-white',
-        active ? 'bg-rose-900 font-semibold text-white' : 'text-white/80 ',
-      )}
-      to={href}
-    >
-      {children}
-    </Link>
+    <div className='relative'>
+      <Link
+        className={clsx(
+          'mx-2 flex items-center gap-2 rounded px-4 py-2.5 font-semibold  transition-colors  hover:text-white',
+          active ? 'cursor-default bg-rose-900 font-semibold text-white' : 'text-white/80 ',
+        )}
+        to={href}
+        unstable_pending={<div className='z-1 absolute top-0 size-full' />}
+      >
+        {children}
+      </Link>
+    </div>
   )
 }

src/pages/library/rom/components/game-overlay/game-overlay-buttons.tsx

@@ -6,7 +6,7 @@ import { GameOverlayButton } from './game-overlay-button.tsx'
 
 export function GameOverlayButtons() {
   const { emulator, exit } = useEmulator()
-  const { isSavingState, saveState } = useGameStates()
+  const { saveState } = useGameStates()
   const { setIsPending, toggle } = useGameOverlay()
 
   function handleClickResume() {
@@ -21,23 +21,38 @@ export function GameOverlayButtons() {
 
   async function handleClickSaveState() {
     setIsPending(true)
-    await saveState()
-    setIsPending(false)
+    try {
+      await saveState()
+      toggle()
+    } finally {
+      setIsPending(false)
+    }
   }
 
   function handleClickExit() {
     exit()
     toggle()
   }
 
+  async function handleClickSaveExit() {
+    setIsPending(true)
+    try {
+      await saveState()
+      toggle()
+      exit()
+    } finally {
+      setIsPending(false)
+    }
+  }
+
   return (
     <>
       <GameOverlayButton onClick={handleClickResume}>
         <span className='icon-[material-symbols--resume] size-7' />
         Resume
       </GameOverlayButton>
 
-      <GameOverlayButton isLoading={isSavingState} onClick={handleClickSaveState}>
+      <GameOverlayButton onClick={handleClickSaveState}>
         <span className='icon-[mdi--content-save] size-7' />
         Save State
       </GameOverlayButton>
@@ -53,7 +68,7 @@ export function GameOverlayButtons() {
         Exit
       </GameOverlayButton>
 
-      <GameOverlayButton>
+      <GameOverlayButton onClick={handleClickSaveExit}>
         <span className='icon-[mdi--location-exit] size-7' />
         Save & Exit
       </GameOverlayButton>

src/pages/library/rom/hooks/use-emulator.ts

@@ -20,8 +20,8 @@ export function useEmulator() {
       rom: romUrl,
       shader,
       style: {
-        height: '100px',
-        width: '100px',
+        // height: '100px',
+        // width: '100px',
       },
     })
   })

src/pages/library/rom/hooks/use-game-states.ts

@@ -1,42 +1,32 @@
 import ky from 'ky'
 import useSWRMutation from 'swr/mutation'
 import { useEmulator } from './use-emulator.ts'
-import { useGameOverlay } from './use-game-overlay.ts'
 
 export function useGameStates() {
   const { core, emulator, rom } = useEmulator()
-  const { toggle } = useGameOverlay()
 
   const {
     data: states,
     isMutating: isStatesLoading,
     trigger: reloadStates,
   } = useSWRMutation('/api/v1/states', (url) => ky(url, { searchParams: { rom_id: rom.id } }).json())
 
-  const { isMutating: isSavingState, trigger: saveState } = useSWRMutation(
-    '/api/v1/state/new',
-    async (url) => {
-      if (!emulator || !core) {
-        throw new Error('invalid emulator or core')
-      }
-      const { state, thumbnail } = await emulator.saveState()
-      const formData = new FormData()
-      formData.append('state', state)
-      if (thumbnail) {
-        formData.append('thumbnail', thumbnail)
-      }
-      formData.append('rom_id', rom.id)
-      formData.append('core', core)
-      formData.append('type', 'manual')
-      await ky.post(url, { body: formData })
-      await reloadStates()
-    },
-    {
-      onSuccess() {
-        toggle()
-      },
-    },
-  )
+  const { isMutating: isSavingState, trigger: saveState } = useSWRMutation('/api/v1/state/new', async (url) => {
+    if (!emulator || !core) {
+      throw new Error('invalid emulator or core')
+    }
+    const { state, thumbnail } = await emulator.saveState()
+    const formData = new FormData()
+    formData.append('state', state)
+    if (thumbnail) {
+      formData.append('thumbnail', thumbnail)
+    }
+    formData.append('rom_id', rom.id)
+    formData.append('core', core)
+    formData.append('type', 'manual')
+    await ky.post(url, { body: formData })
+    await reloadStates()
+  })
 
   return { isSavingState, isStatesLoading, reloadStates, saveState, states }
 }

src/styles/globals.css

@@ -9,7 +9,7 @@ body {
 }
 
 body[data-theme="rose"] {
-  /* --theme: var(--color-rose-700); */
+  --theme: var(--color-rose-700);
 }
 
 button {