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

@@ -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>