From 237d546aba04b5540ddde98e24307d1dbc5baf51 Mon Sep 17 00:00:00 2001
From: luccast <2213102+luccast@users.noreply.github.com>
Date: Mon, 26 Jan 2026 14:22:29 -0500
Subject: [PATCH] Enhance crab animations by preloading frames in Home
 component

- Added useEffect to preload all crab animation frames on component mount, improving performance during animations.
- Introduced a constant for all crab animation frame paths to streamline the preloading process.
---
 src/routes/index.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 49ac147..8c154ba 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,8 +1,15 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { motion } from 'framer-motion'
 import { CrabIdleAnimation, CrabJumpAnimation, CrabAttackAnimation } from '~/components/ani'
 
+// All crab animation frames to preload
+const ALL_CRAB_FRAMES = [
+  ...Array.from({ length: 5 }, (_, i) => `/ani/crab-idle/Crab${i + 1}.png`),
+  ...Array.from({ length: 4 }, (_, i) => `/ani/crab-jump/CrabMoving${i + 1}.png`),
+  ...Array.from({ length: 4 }, (_, i) => `/ani/crab-attack/Crab_Attack${i + 1}.png`),
+]
+
 export const Route = createFileRoute('/')({
   component: Home,
 })
@@ -36,6 +43,14 @@ function Home() {
   const [crabState, setCrabState] = useState<CrabState>('idle')
   const [isHovering, setIsHovering] = useState(false)
 
+  // Preload all crab animation frames on mount
+  useEffect(() => {
+    for (const src of ALL_CRAB_FRAMES) {
+      const img = new Image()
+      img.src = src
+    }
+  }, [])
+
   const handleMouseEnter = useCallback(() => {
     setIsHovering(true)
     if (crabState !== 'attacking') {