From 2d2259a0db3d5dbf430c293f6515ab83428ff750 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sun, 19 Apr 2026 19:45:01 +0200
Subject: [PATCH] feat(35-02): add loading=lazy and onLoad prop to GearImage

- Add optional onLoad prop to GearImageProps interface
- Destructure onLoad in function signature
- Forward loading="lazy" and onLoad to all three img render paths (cover, hasCrop, default)
---
 src/client/components/GearImage.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/client/components/GearImage.tsx b/src/client/components/GearImage.tsx
index d417c04..a539f6b 100644
--- a/src/client/components/GearImage.tsx
+++ b/src/client/components/GearImage.tsx
@@ -7,6 +7,7 @@ interface GearImageProps {
 	cropY?: number | null;
 	className?: string;
 	cover?: boolean;
+	onLoad?: () => void;
 }
 
 export function GearImage({
@@ -18,6 +19,7 @@ export function GearImage({
 	cropY,
 	className = "",
 	cover = false,
+	onLoad,
 }: GearImageProps) {
 	const hasCrop = cropZoom != null && cropZoom > 1;
 	const bgStyle = dominantColor
@@ -29,6 +31,8 @@ export function GearImage({
 			<img
 				src={src}
 				alt={alt}
+				loading="lazy"
+				onLoad={onLoad}
 				className={`w-full h-full object-cover ${className}`}
 			/>
 		);
@@ -40,6 +44,8 @@ export function GearImage({
 				<img
 					src={src}
 					alt={alt}
+					loading="lazy"
+					onLoad={onLoad}
 					className={`w-full h-full object-cover ${className}`}
 					style={{
 						transform: `scale(${cropZoom}) translate(${cropX ?? 0}%, ${cropY ?? 0}%)`,
@@ -58,6 +64,8 @@ export function GearImage({
 			<img
 				src={src}
 				alt={alt}
+				loading="lazy"
+				onLoad={onLoad}
 				className={`w-full h-full object-contain ${className}`}
 			/>
 		</div>