fix(35): WR-03 add onError to GearImage to dismiss skeleton on broken images

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/client/components/CandidateCard.tsx

@@ -183,6 +183,7 @@ export function CandidateCard({
 							cropX={cropX}
 							cropY={cropY}
 							onLoad={() => setLoaded(true)}
+							onError={() => setLoaded(true)}
 							className={`transition-opacity duration-200 ${loaded ? "opacity-100" : "opacity-0"}`}
 						/>
 					</div>

src/client/components/GearImage.tsx

@@ -8,6 +8,7 @@ interface GearImageProps {
 	className?: string;
 	cover?: boolean;
 	onLoad?: () => void;
+	onError?: () => void;
 }
 
 export function GearImage({
@@ -20,6 +21,7 @@ export function GearImage({
 	className = "",
 	cover = false,
 	onLoad,
+	onError,
 }: GearImageProps) {
 	const hasCrop = cropZoom != null && cropZoom > 1;
 	const bgStyle = dominantColor
@@ -33,6 +35,7 @@ export function GearImage({
 				alt={alt}
 				loading="lazy"
 				onLoad={onLoad}
+				onError={onError}
 				className={`w-full h-full object-cover ${className}`}
 			/>
 		);
@@ -46,6 +49,7 @@ export function GearImage({
 					alt={alt}
 					loading="lazy"
 					onLoad={onLoad}
+					onError={onError}
 					className={`w-full h-full object-cover ${className}`}
 					style={{
 						transform: `scale(${cropZoom}) translate(${cropX ?? 0}%, ${cropY ?? 0}%)`,
@@ -66,6 +70,7 @@ export function GearImage({
 				alt={alt}
 				loading="lazy"
 				onLoad={onLoad}
+				onError={onError}
 				className={`w-full h-full object-contain ${className}`}
 			/>
 		</div>

src/client/components/GlobalItemCard.tsx

@@ -60,6 +60,7 @@ export function GlobalItemCard({
 							cropX={cropX}
 							cropY={cropY}
 							onLoad={() => setLoaded(true)}
+							onError={() => setLoaded(true)}
 							className={`transition-opacity duration-200 ${loaded ? "opacity-100" : "opacity-0"}`}
 						/>
 					</div>

src/client/components/ItemCard.tsx

@@ -208,6 +208,7 @@ export function ItemCard({
 							cropX={cropX}
 							cropY={cropY}
 							onLoad={() => setLoaded(true)}
+							onError={() => setLoaded(true)}
 							className={`transition-opacity duration-200 ${loaded ? "opacity-100" : "opacity-0"}`}
 						/>
 					</div>