feat(icon-components): Improve image loading/error handling and add WebP support across icon-related components

web/src/components/icon-card.tsx

@@ -4,6 +4,8 @@ import type { Icon } from "@/types/icons"
 import Image from "next/image"
 import Link from "next/link"
 import { useState } from "react"
+import { AlertTriangle } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 
 export function IconCard({
 	name,
@@ -15,33 +17,54 @@ export function IconCard({
 	matchedAlias?: string
 }) {
 	const [isLoading, setIsLoading] = useState(true)
+	const [hasError, setHasError] = useState(false)
 
 	// Construct URLs for both WebP and the original format
 	const webpSrc = `${BASE_URL}/webp/${name}.webp`
 	const originalSrc = `${BASE_URL}/${iconData.base}/${name}.${iconData.base}`
 
+	const handleLoadingComplete = () => {
+		setIsLoading(false)
+		setHasError(false)
+	}
+
+	const handleError = () => {
+		setIsLoading(false)
+		setHasError(true)
+	}
+
 	return (
 		<MagicCard className="rounded-md shadow-md">
 			<Link prefetch={false} href={`/icons/${name}`} className="group flex flex-col items-center p-3 sm:p-4 cursor-pointer">
-				<div className="relative h-16 w-16 mb-2">
-					{isLoading && (
+				<div className="relative h-16 w-16 mb-2 flex items-center justify-center">
+					{isLoading && !hasError && (
 						<div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 animate-pulse rounded" />
 					)}
-					{/* Use <picture> tag for WebP support with fallback */}
-					<picture>
-						<source srcSet={webpSrc} type="image/webp" />
-						<source srcSet={originalSrc} type={`image/${iconData.base === 'svg' ? 'svg+xml' : iconData.base}`} />
-						{/* next/image as the img fallback and for optimization */}
-						<Image
-							src={originalSrc} // Fallback src for next/image
-							alt={`${name} icon`}
-							fill
-							className={`object-contain p-1 group-hover:scale-110 transition-transform duration-300 ${isLoading ? 'opacity-0' : 'opacity-100 transition-opacity duration-500'}`}
-							onLoadingComplete={() => setIsLoading(false)}
-							// Add sizes prop for responsive optimization if needed, e.g.,
-							// sizes="(max-width: 640px) 50vw, (max-width: 1280px) 33vw, 16.6vw"
-						/>
-					</picture>
+					{hasError ? (
+						<TooltipProvider delayDuration={300}>
+							<Tooltip>
+								<TooltipTrigger aria-label="Image loading error">
+									<AlertTriangle className="h-8 w-8 text-red-500 cursor-help" />
+								</TooltipTrigger>
+								<TooltipContent side="bottom">
+									<p>Image failed to load, likely due to size limits. Please raise an issue on GitHub.</p>
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					) : (
+						<picture>
+							<source srcSet={webpSrc} type="image/webp" />
+							<source srcSet={originalSrc} type={`image/${iconData.base === 'svg' ? 'svg+xml' : iconData.base}`} />
+							<Image
+								src={originalSrc}
+								alt={`${name} icon`}
+								fill
+								className={`object-contain p-1 group-hover:scale-110 transition-transform duration-300 ${isLoading || hasError ? 'opacity-0' : 'opacity-100 transition-opacity duration-500'}`}
+								onLoadingComplete={handleLoadingComplete}
+								onError={handleError}
+							/>
+						</picture>
+					)}
 				</div>
 				<span className="text-xs sm:text-sm text-center truncate w-full capitalize group- dark:group-hover:text-primary transition-colors duration-200 font-medium">
 					{name.replace(/-/g, " ")}