diff --git a/src/components/ItemCard.tsx b/src/components/ItemCard.tsx index fa5174f..09dd212 100644 --- a/src/components/ItemCard.tsx +++ b/src/components/ItemCard.tsx @@ -1,6 +1,6 @@ -import { useState } from 'react' +import { useEffect, useState } from 'react' import type { Product, Drone, CompleteDrone, KitBuild } from '../types' -import { useResolvedImage, resolveImageSync } from '../utils/imageCache' +import { useResolvedImage, resolveImageSync, resolveImage } from '../utils/imageCache' function fmt(amount: number, currency: string) { return new Intl.NumberFormat('en', { style: 'currency', currency }).format(amount) @@ -26,6 +26,14 @@ export function ItemCard({ item, onEdit, onRemove }: Props) { const [hoverImg, setHoverImg] = useState(null) const [mousePos, setMousePos] = useState({ x: 0, y: 0 }) + // Preload part images into memCache so resolveImageSync works on hover + useEffect(() => { + if (!isKit) return + for (const p of (item as KitBuild).parts) { + if (p.image) resolveImage(p.image) + } + }, [item]) + const priceLabel = isKit ? kitTotal(item as KitBuild) : isDrone