mirror/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-11-09 21:18:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Bjorn Lammers
2025-04-26 00:20:06 +02:00
parent 968c696bc7
commit 9d2a35489f
4 changed files with 235 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
web/src/components/recently-added-icons.tsx
View File

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