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

2025-10-31 08:47:57 +01:00 · 2025-04-26 00:20:06 +02:00
parent 968c696bc7
commit 9d2a35489f
4 changed files with 235 additions and 86 deletions
--- a/web/src/app/icons/[icon]/page.tsx
+++ b/web/src/app/icons/[icon]/page.tsx
@@ -33,7 +33,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:

 	console.debug(`Generated metadata for ${icon} by ${authorName} (${authorData.html_url}) updated at ${updateDate.toLocaleString()}`)

-	const iconImageUrl = `${BASE_URL}/png/${icon}.png`
+	const iconPreviewImageUrl = `${BASE_URL}/webp/${icon}.webp`
 	const pageUrl = `${WEB_URL}/icons/${icon}`
 	const formattedIconName = icon
 		.split("-")
@@ -43,7 +43,11 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 	return {
 		title: `${formattedIconName} Icon | Dashboard Icons`,
 		description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
-		assets: [iconImageUrl],
+		assets: [
+			`${BASE_URL}/svg/${icon}.svg`,
+			`${BASE_URL}/png/${icon}.png`,
+			`${BASE_URL}/webp/${icon}.webp`,
+		],
 		keywords: [
 			`${formattedIconName} icon`,
 			`${formattedIconName} icon download`,
@@ -57,7 +61,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 			"app directory",
 		],
 		icons: {
-			icon: iconImageUrl,
+			icon: iconPreviewImageUrl,
 		},
 		abstract: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 		openGraph: {
@@ -70,17 +74,18 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 			modifiedTime: updateDate.toISOString(),
 			section: "Icons",
 			tags: [formattedIconName, "dashboard icon", "service icon", "application icon", "tool icon", "web dashboard", "app directory"],
+			images: [iconPreviewImageUrl],
 		},
 		twitter: {
 			card: "summary_large_image",
 			title: `${formattedIconName} Icon | Dashboard Icons`,
 			description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
-			images: [iconImageUrl],
+			images: [iconPreviewImageUrl],
 		},
 		alternates: {
 			canonical: pageUrl,
 			media: {
-				png: iconImageUrl,
+				png: `${BASE_URL}/png/${icon}.png`,
 				svg: `${BASE_URL}/svg/${icon}.svg`,
 				webp: `${BASE_URL}/webp/${icon}.webp`,
 			},
--- a/web/src/components/icon-card.tsx
+++ b/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, " ")}
--- a/web/src/components/icon-details.tsx
+++ b/web/src/components/icon-details.tsx
@@ -9,7 +9,7 @@ import { BASE_URL, REPO_PATH } from "@/constants"
 import type { AuthorData, Icon, IconFile } from "@/types/icons"
 import confetti from "canvas-confetti"
 import { motion } from "framer-motion"
-import { ArrowRight, Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun } from "lucide-react"
+import { ArrowRight, Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun, AlertTriangle } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { useCallback, useState } from "react"
@@ -26,6 +26,10 @@ export type IconDetailsProps = {
 }

 export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetailsProps) {
+	// Add state for the main preview icon
+	const [isPreviewLoading, setIsPreviewLoading] = useState(true)
+	const [hasPreviewError, setHasPreviewError] = useState(false)
+
 	const authorName = authorData.name || authorData.login || ""
 	const iconColorVariants = iconData.colors
 	const formattedDate = new Date(iconData.update.timestamp).toLocaleDateString("en-GB", {
@@ -142,13 +146,44 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
 		}
 	}

+	// Handlers for main preview icon
+	const handlePreviewLoadingComplete = () => {
+		setIsPreviewLoading(false)
+		setHasPreviewError(false)
+	}
+
+	const handlePreviewError = () => {
+		setIsPreviewLoading(false)
+		setHasPreviewError(true)
+	}
+
+	// URLs for main preview icon
+	const previewWebpSrc = `${BASE_URL}/webp/${icon}.webp`
+	const previewOriginalSrc = `${BASE_URL}/${iconData.base}/${icon}.${iconData.base}`
+	const previewOriginalFormat = iconData.base
+
 	const renderVariant = (format: string, iconName: string, theme?: "light" | "dark") => {
+		const [isLoading, setIsLoading] = useState(true)
+		const [hasError, setHasError] = useState(false)
+
 		const variantName = theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName
-		const imageUrl = `${BASE_URL}/${format}/${variantName}.${format}`
-		const githubUrl = `${REPO_PATH}/tree/main/${format}/${iconName}.${format}`
+		const originalFormat = iconData.base
+		const originalImageUrl = `${BASE_URL}/${originalFormat}/${variantName}.${originalFormat}`
+		const webpImageUrl = `${BASE_URL}/webp/${variantName}.webp`
+		const githubUrl = `${REPO_PATH}/tree/main/${originalFormat}/${iconName}.${originalFormat}`
 		const variantKey = `${format}-${theme || "default"}`
 		const isCopied = copiedVariants[variantKey] || false

+		const handleLoadingComplete = () => {
+			setIsLoading(false)
+			setHasError(false)
+		}
+
+		const handleError = () => {
+			setIsLoading(false)
+			setHasError(true)
+		}
+
 		return (
 			<TooltipProvider key={variantKey} delayDuration={500}>
 				<MagicCard className="p-0 rounded-md">
@@ -156,50 +191,65 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<motion.div
-									className="relative w-28 h-28 mb-3 cursor-pointer rounded-xl overflow-hidden group"
-									whileHover={{ scale: 1.05 }}
-									whileTap={{ scale: 0.95 }}
-									onClick={(e) => handleCopy(imageUrl, variantKey, e)}
-									aria-label={`Copy ${format.toUpperCase()} URL for ${iconName}${theme ? ` (${theme} theme)` : ""}`}
+									className="relative w-28 h-28 mb-3 cursor-pointer rounded-xl overflow-hidden group flex items-center justify-center"
+									whileHover={{ scale: hasError ? 1 : 1.05 }}
+									whileTap={{ scale: hasError ? 1 : 0.95 }}
+									onClick={(e) => !hasError && handleCopy(format === 'webp' ? webpImageUrl : originalImageUrl, variantKey, e)}
+									aria-label={hasError ? "Image failed to load" : `Copy ${format.toUpperCase()} URL for ${iconName}${theme ? ` (${theme} theme)` : ""}`}
 								>
-									<div className="absolute inset-0 border-2 border-transparent group-hover:border-primary/20 rounded-xl z-10 transition-colors" />
+									{isLoading && !hasError && (
+										<div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 animate-pulse rounded-xl z-10" />
+									)}
+									{hasError ? (
+										<AlertTriangle className="h-12 w-12 text-red-500 z-10 cursor-help" />
+									) : (
+										<>
+											<div className="absolute inset-0 border-2 border-transparent group-hover:border-primary/20 rounded-xl z-10 transition-colors pointer-events-none" />
+											<motion.div
+												className="absolute inset-0 bg-primary/10 flex items-center justify-center z-20 rounded-xl pointer-events-none"
+												initial={{ opacity: 0 }}
+												animate={{ opacity: isCopied ? 1 : 0 }}
+												transition={{ duration: 0.2 }}
+											>
+												<motion.div
+													initial={{ scale: 0.5, opacity: 0 }}
+													animate={{ scale: isCopied ? 1 : 0.5, opacity: isCopied ? 1 : 0 }}
+													transition={{ type: "spring", stiffness: 300, damping: 20 }}
+												>
+													<Check className="w-8 h-8 text-primary" />
+												</motion.div>
+											</motion.div>

-									<motion.div
-										className="absolute inset-0 bg-primary/10 flex items-center justify-center z-20 rounded-xl"
-										initial={{ opacity: 0 }}
-										animate={{ opacity: isCopied ? 1 : 0 }}
-										transition={{ duration: 0.2 }}
-									>
-										<motion.div
-											initial={{ scale: 0.5, opacity: 0 }}
-											animate={{
-												scale: isCopied ? 1 : 0.5,
-												opacity: isCopied ? 1 : 0,
-											}}
-											transition={{
-												type: "spring",
-												stiffness: 300,
-												damping: 20,
-											}}
-										>
-											<Check className="w-8 h-8 text-primary" />
-										</motion.div>
-									</motion.div>
-
-									<Image
-										src={imageUrl}
-										alt={`${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
-										fill
-										className="object-contain p-4"
-									/>
+											<picture>
+												<source srcSet={webpImageUrl} type="image/webp" />
+												<source srcSet={originalImageUrl} type={`image/${originalFormat === 'svg' ? 'svg+xml' : originalFormat}`} />
+												<Image
+													src={originalImageUrl}
+													alt={`${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
+													fill
+													className={`object-contain p-4 transition-opacity duration-500 ${isLoading || hasError ? 'opacity-0' : 'opacity-100'}`}
+													onLoadingComplete={handleLoadingComplete}
+													onError={handleError}
+												/>
+											</picture>
+										</>
+									)}
 								</motion.div>
 							</TooltipTrigger>
 							<TooltipContent>
-								<p>Click to copy direct URL to clipboard</p>
+								<p>
+									{hasError
+										? "Image failed to load, likely due to size limits. Please raise an issue on GitHub."
+										: isCopied
+											? "URL Copied!"
+											: "Click to copy direct URL to clipboard"}
+								</p>
 							</TooltipContent>
 						</Tooltip>

-						<p className="text-sm font-medium">{format.toUpperCase()}</p>
+						<p className="text-sm font-medium capitalize">
+							{format.toUpperCase()} {theme && `(${theme})`}
+						</p>

 						<div className="flex gap-2 mt-3 w-full justify-center">
 							<Tooltip>
@@ -208,14 +258,15 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
 										variant="outline"
 										size="icon"
 										className="h-8 w-8 rounded-lg cursor-pointer"
-										onClick={(e) => handleDownload(e, imageUrl, `${iconName}.${format}`)}
+										onClick={(e) => !hasError && handleDownload(e, format === 'webp' ? webpImageUrl : originalImageUrl, `${variantName}.${format}`)}
 										aria-label={`Download ${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
+										disabled={hasError}
 									>
 										<Download className="w-4 h-4" />
 									</Button>
 								</TooltipTrigger>
 								<TooltipContent>
-									<p>Download icon file</p>
+									<p>{hasError ? "Download unavailable" : "Download icon file"}</p>
 								</TooltipContent>
 							</Tooltip>

@@ -225,14 +276,15 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
 										variant="outline"
 										size="icon"
 										className="h-8 w-8 rounded-lg cursor-pointer"
-										onClick={(e) => handleCopy(imageUrl, `btn-${variantKey}`, e)}
+										onClick={(e) => !hasError && handleCopy(format === 'webp' ? webpImageUrl : originalImageUrl, `btn-${variantKey}`, e)}
 										aria-label={`Copy URL for ${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
+										disabled={hasError}
 									>
 										{copiedVariants[`btn-${variantKey}`] ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
 									</Button>
 								</TooltipTrigger>
 								<TooltipContent>
-									<p>Copy direct URL to clipboard</p>
+									<p>{hasError ? "Copy unavailable" : isCopied ? "URL Copied!" : "Copy direct URL to clipboard"}</p>
 								</TooltipContent>
 							</Tooltip>

@@ -243,7 +295,7 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
 											href={githubUrl}
 											target="_blank"
 											rel="noopener noreferrer"
-											aria-label={`View ${iconName} ${format} file on GitHub`}
+											aria-label={`View ${iconName} ${originalFormat} file on GitHub`}
 										>
 											<Github className="w-4 h-4" />
 										</Link>
@@ -268,14 +320,37 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
 					<Card className="h-full bg-background/50 border shadow-lg">
 						<CardHeader className="pb-4">
 							<div className="flex flex-col items-center">
-								<div className="relative w-32 h-32 rounded-xl overflow-hidden border flex items-center justify-center p-3">
-									<Image
-										src={`${BASE_URL}/${iconData.base}/${icon}.${iconData.base}`}
-										width={96}
-										height={96}
-										alt={`High quality ${icon.replace(/-/g, " ")} icon in ${iconData.base.toUpperCase()} format`}
-										className="w-full h-full object-contain"
-									/>
+								{/* Apply loading/error handling to the main preview icon */}
+								<div className="relative w-32 h-32 rounded-xl overflow-hidden border flex items-center justify-center p-3 mb-4">
+									{isPreviewLoading && !hasPreviewError && (
+										<div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 animate-pulse rounded-xl" />
+									)}
+									{hasPreviewError ? (
+										<TooltipProvider delayDuration={300}>
+											<Tooltip>
+												<TooltipTrigger aria-label="Preview image loading error">
+													<AlertTriangle className="h-16 w-16 text-red-500 cursor-help" />
+												</TooltipTrigger>
+												<TooltipContent side="bottom">
+													<p>Preview failed to load, likely due to size limits. Please raise an issue.</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									) : (
+										<picture>
+											<source srcSet={previewWebpSrc} type="image/webp" />
+											<source srcSet={previewOriginalSrc} type={`image/${previewOriginalFormat === 'svg' ? 'svg+xml' : previewOriginalFormat}`} />
+											<Image
+												src={previewOriginalSrc}
+												alt={`High quality ${icon.replace(/-/g, " ")} icon preview`}
+												fill // Use fill instead of width/height for parent relative sizing
+												className={`object-contain transition-opacity duration-500 ${isPreviewLoading || hasPreviewError ? 'opacity-0' : 'opacity-100'}`}
+												onLoadingComplete={handlePreviewLoadingComplete}
+												onError={handlePreviewError}
+												priority // Prioritize loading the main icon
+											/>
+										</picture>
+									)}
 								</div>
 								<CardTitle className="text-2xl font-bold capitalize text-center mb-2">
 									<h1>{icon.replace(/-/g, " ")}</h1>
--- a/web/src/components/recently-added-icons.tsx
+++ b/web/src/components/recently-added-icons.tsx
@@ -5,9 +5,11 @@ import { BASE_URL } from "@/constants"
 import { cn } from "@/lib/utils"
 import type { Icon, IconWithName } from "@/types/icons"
 import { format, isToday, isYesterday } from "date-fns"
-import { ArrowRight, Clock, ExternalLink } from "lucide-react"
+import { ArrowRight, Clock, ExternalLink, AlertTriangle } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
+import { useState } from "react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

 function formatIconDate(timestamp: string): string {
 	const date = new Date(timestamp)
@@ -78,6 +80,24 @@ function RecentIconCard({
 	name: string
 	data: Icon
 }) {
+	const [isLoading, setIsLoading] = useState(true)
+	const [hasError, setHasError] = useState(false)
+
+	// Construct URLs
+	const webpSrc = `${BASE_URL}/webp/${name}.webp`
+	const originalSrc = `${BASE_URL}/${data.base}/${name}.${data.base}`
+	const originalFormat = data.base
+
+	const handleLoadingComplete = () => {
+		setIsLoading(false)
+		setHasError(false)
+	}
+
+	const handleError = () => {
+		setIsLoading(false)
+		setHasError(true)
+	}
+
 	return (
 		<Link
 			prefetch={false}
@@ -87,18 +107,44 @@ function RecentIconCard({
 				"transition-all duration-300 hover:shadow-lg hover:shadow-rose-500/5 relative overflow-hidden hover-lift",
 				"w-36 mx-2",
 			)}
+			aria-label={`View details for ${name.replace(/-/g, " ")} icon`}
 		>
-			<div className="absolute inset-0 bg-gradient-to-br from-rose-500/5 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300" />
+			<div className="absolute inset-0 bg-gradient-to-br from-rose-500/5 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none" />

-			<div className="relative h-12 w-12 sm:h-16 sm:w-16 mb-2">
-				<Image
-					src={`${BASE_URL}/${data.base}/${name}.${data.base}`}
-					alt={`${name} icon`}
-					fill
-					className="object-contain p-1 hover:scale-110 transition-transform duration-300"
-				/>
+			{/* Image container with loading/error handling */}
+			<div className="relative h-12 w-12 sm:h-16 sm: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" />
+				)}
+				{hasError ? (
+					<TooltipProvider delayDuration={300}>
+						<Tooltip>
+							<TooltipTrigger aria-label="Image loading error">
+								<AlertTriangle className="h-6 w-6 sm:h-8 sm:w-8 text-red-500 cursor-help" />
+							</TooltipTrigger>
+							<TooltipContent side="bottom">
+								<p>Image failed to load. Please raise an issue.</p>
+							</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
+				) : (
+					<picture>
+						<source srcSet={webpSrc} type="image/webp" />
+						<source srcSet={originalSrc} type={`image/${originalFormat === 'svg' ? 'svg+xml' : originalFormat}`} />
+						<Image
+							src={originalSrc}
+							alt={`${name} icon`}
+							fill
+							className={`object-contain p-1 transition-opacity duration-500 group-hover:scale-110 ${isLoading || hasError ? 'opacity-0' : 'opacity-100'}`}
+							onLoadingComplete={handleLoadingComplete}
+							onError={handleError}
+							// No priority needed for marquee items
+						/>
+					</picture>
+				)}
 			</div>
-			<span className="text-xs sm:text-sm text-center truncate w-full capitalize  dark:hover:text-rose-400 transition-colors duration-200 font-medium">
+
+			<span className="text-xs sm:text-sm text-center truncate w-full capitalize dark:hover:text-rose-400 transition-colors duration-200 font-medium">
 				{name.replace(/-/g, " ")}
 			</span>
 			<div className="flex items-center justify-center mt-2 w-full">
@@ -108,8 +154,8 @@ function RecentIconCard({
 				</span>
 			</div>

-			<div className="absolute top-2 right-2 opacity-0 hover:opacity-100 transition-opacity duration-200">
-				<ExternalLink className="w-3 h-3 " />
+			<div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+				<ExternalLink className="w-3 h-3 text-muted-foreground" />
 			</div>
 		</Link>
 	)