fix: fix exit animation

arianrhodsandlot · Nov 7, 2023 · af488f6 · af488f6
1 parent fdc0992
commit af488f6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/...ws/components/routes/library/platform/home-screen/game-launching/game-launching-image.tsx b/...ws/components/routes/library/platform/home-screen/game-launching/game-launching-image.tsx
@@ -31,7 +31,7 @@ export function GameLaunchingImage({
           initial={styles.initial}
           onAnimationComplete={onAnimationComplete}
           onAnimationStart={onAnimationStart}
-          transition={{ duration: 0.2 }}
+          transition={{ duration: 0.4 }}
         >
           {children}
         </motion.div>

diff --git a/src/views/components/routes/library/platform/home-screen/game-launching/index.tsx b/src/views/components/routes/library/platform/home-screen/game-launching/index.tsx
@@ -13,14 +13,17 @@ import { GameLaunchingImage } from './game-launching-image'
 function getMaskStyle(target: HTMLButtonElement | undefined) {
   const boundingClientRect = target?.getBoundingClientRect()
   const { y, x, width, height } = boundingClientRect || {}
+  const isValidBounding =
+    typeof y === 'number' && typeof x === 'number' && typeof width === 'number' && typeof height === 'number'
   let maskPosition = {}
-  if (boundingClientRect) {
+  if (isValidBounding) {
     maskPosition =
       width && height ? { top: y, left: x, width, height } : { top: '50%', left: '50%', width: '0', height: '0' }
   }
   const initial = { ...maskPosition, filter: 'brightness(1)' }
   const expanded = { ...maskPosition, top: 0, left: 0, width: '100%', height: '100%', filter: 'brightness(0)' }
-  return { valid: Boolean(boundingClientRect), initial, expanded }
+  const exit = isValidBounding ? { width: 0, height: 0, left: x + width / 2, top: y + height / 2, opacity: 0 } : initial
+  return { valid: isValidBounding, initial, exit, expanded }
 }
 
 export function GameLaunching() {
@@ -69,7 +72,11 @@ export function GameLaunching() {
     }
   }
 
-  const styles = { initial: maskStyle.initial, exit: maskStyle.initial, animate: maskStyle.expanded }
+  const styles = {
+    initial: maskStyle.initial,
+    exit: maskStyle.exit,
+    animate: maskStyle.expanded,
+  }
 
   return (
     <GameLaunchingImage

diff --git a/src/views/components/routes/library/platform/home-screen/index.tsx b/src/views/components/routes/library/platform/home-screen/index.tsx
@@ -93,9 +93,13 @@ export function HomeScreen() {
   // load roms from cache
   const [peekRomsState, { execute: loadRomsFromCache }] = useAsync(async () => {
     if (currentPlatformName) {
-      const { platform: romsPlatform, roms } = await peekRoms(currentPlatformName)
+      const { platform: romsPlatform, roms: newRoms } = await peekRoms(currentPlatformName)
       if (romsPlatform === currentPlatformRef.current) {
-        setRoms(roms?.length ? roms : [])
+        if (newRoms?.length) {
+          setRoms(newRoms)
+        } else if (!roms?.length) {
+          setRoms([])
+        }
       }
     }
   })
@@ -155,11 +159,13 @@ export function HomeScreen() {
   )
 
   useEffect(() => {
+    if (isRomRoute) {
+      return
+    }
+
     ;(async () => {
       await loadPlatformsAndRomsFromCache()
-      if (!isRomRoute) {
-        await loadPlatformsAndRomsFromRemote()
-      }
+      await loadPlatformsAndRomsFromRemote()
     })()
   }, [params.library, currentPlatformName, isRomRoute, loadPlatformsAndRomsFromCache, loadPlatformsAndRomsFromRemote])