From 93c273d266c59a40c582cf7a2fe4904391e754a7 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sun, 19 Apr 2026 20:14:07 +0200
Subject: [PATCH] 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  | 1 +
 src/client/components/GearImage.tsx      | 5 +++++
 src/client/components/GlobalItemCard.tsx | 1 +
 src/client/components/ItemCard.tsx       | 1 +
 4 files changed, 8 insertions(+)

diff --git a/src/client/components/CandidateCard.tsx b/src/client/components/CandidateCard.tsx
index d2414f3..fad0422 100644
--- a/src/client/components/CandidateCard.tsx
+++ b/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>
diff --git a/src/client/components/GearImage.tsx b/src/client/components/GearImage.tsx
index a539f6b..ad01334 100644
--- a/src/client/components/GearImage.tsx
+++ b/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>
diff --git a/src/client/components/GlobalItemCard.tsx b/src/client/components/GlobalItemCard.tsx
index 5045b9c..9f6b5e5 100644
--- a/src/client/components/GlobalItemCard.tsx
+++ b/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>
diff --git a/src/client/components/ItemCard.tsx b/src/client/components/ItemCard.tsx
index 5f7fc00..974898a 100644
--- a/src/client/components/ItemCard.tsx
+++ b/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>