From 8873a7c67a984a8df994c5c3b7f300d3ead65320 Mon Sep 17 00:00:00 2001
From: Bjorn Lammers <bjorn@lammers.media>
Date: Sat, 26 Apr 2025 00:06:07 +0200
Subject: [PATCH] feat(icon-card): Add loading state and WebP support for
 images

---
 web/src/components/icon-card.tsx | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/web/src/components/icon-card.tsx b/web/src/components/icon-card.tsx
index 05e19e72..190e3d2b 100644
--- a/web/src/components/icon-card.tsx
+++ b/web/src/components/icon-card.tsx
@@ -3,6 +3,7 @@ import { BASE_URL } from "@/constants"
 import type { Icon } from "@/types/icons"
 import Image from "next/image"
 import Link from "next/link"
+import { useState } from "react"
 
 export function IconCard({
 	name,
@@ -13,16 +14,34 @@ export function IconCard({
 	data: Icon
 	matchedAlias?: string
 }) {
+	const [isLoading, setIsLoading] = useState(true)
+
+	// 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}`
+
 	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">
-					<Image
-						src={`${BASE_URL}/${iconData.base}/${name}.${iconData.base}`}
-						alt={`${name} icon`}
-						fill
-						className="object-contain p-1 group-hover:scale-110 transition-transform duration-300"
-					/>
+					{isLoading && (
+						<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>
 				</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, " ")}