feat: preload card image

src/ui/Duel/PlayMat/Card/index.tsx

@@ -34,6 +34,7 @@ import {
   moveToToken,
 } from "./springs";
 import type { SpringApiProps } from "./springs/types";
+import { preloadCardImage } from "./springs/utils";
 
 const { HAND, GRAVE, REMOVED, DECK, EXTRA, MZONE, SZONE, TZONE } =
   ygopro.CardZone;
@@ -106,7 +107,10 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
       Task.Move,
       async (uuid: string, fromZone?: ygopro.CardZone) => {
         if (uuid === card.uuid) {
-          await addToAnimation(() => move(card.location.zone, fromZone));
+          await addToAnimation(async () => {
+            await preloadCardImage(card.code);
+            await move(card.location.zone, fromZone);
+          });
         }
       }
     );
@@ -114,6 +118,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
     eventbus.register(Task.Focus, async (uuid: string) => {
       if (uuid === card.uuid) {
         await addToAnimation(async () => {
+          await preloadCardImage(card.code);
           setClassFocus(true);
           setTimeout(() => setClassFocus(false), 1000);
           await focus({ card, api });

src/ui/Duel/PlayMat/Card/springs/index.ts

@@ -5,3 +5,4 @@ export * from "./moveToGround";
 export * from "./moveToHand";
 export * from "./moveToOutside";
 export * from "./moveToToken";
+export * from "./utils";

src/ui/Duel/PlayMat/Card/springs/utils.ts

@@ -2,6 +2,7 @@ import { type SpringConfig, type SpringRef } from "@react-spring/web";
 
 import type { ygopro } from "@/api";
 import { type CardType } from "@/stores";
+import { getCardImgUrl } from "@/ui/Shared";
 
 import type { SpringApi } from "./types";
 
@@ -20,3 +21,25 @@ export type MoveFunc = (props: {
   api: SpringApi;
   fromZone?: ygopro.CardZone;
 }) => Promise<void>;
+
+// >>> preload image >>>
+const preloadImageSet = new Set<string>();
+export const preloadImage = (src: string) =>
+  new Promise<void>((resolve, reject) => {
+    if (preloadImageSet.has(src)) {
+      resolve();
+    } else {
+      const image = new Image();
+      image.onload = async () => {
+        await new Promise((r) => setTimeout(r, 100));
+        resolve();
+        preloadImageSet.add(src);
+      };
+      image.onerror = reject;
+      image.src = src;
+    }
+  });
+export const preloadCardImage = (code: number) =>
+  preloadImage(getCardImgUrl(code));
+
+// <<< preload image <<<

src/ui/Shared/YgoCard/index.tsx

@@ -38,7 +38,7 @@ export const YgoCard: React.FC<Props> = (props) => {
 
 const NeosConfig = useConfig();
 
-function getCardImgUrl(code: number, back = false) {
+export function getCardImgUrl(code: number, back = false) {
   const ASSETS_BASE =
     import.meta.env.BASE_URL === "/"
       ? NeosConfig.assetsPath