makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 10 Wiki Activity

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

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jean-Luc Makiola
2026-04-19 20:14:07 +02:00
parent 65f25e5964
commit 93c273d266
4 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/client/components/CandidateCard.tsx
View File

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

5
src/client/components/GearImage.tsx
View File

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

1
src/client/components/GlobalItemCard.tsx
View File

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

1
src/client/components/ItemCard.tsx
View File

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