opensource/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-06-28 15:30:22 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(icon-card): Add loading state and WebP support for images

Browse Source
This commit is contained in:
Bjorn Lammers 2025-04-26 00:06:07 +02:00
parent 4d9472cd3d
commit 8873a7c67a
1 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/components/icon-card.tsx
View File

@ -3,6 +3,7 @@ import { BASE_URL } from "@/constants"
import type { Icon } from "@/types/icons" import type { Icon } from "@/types/icons"
import Image from "next/image" import Image from "next/image"
import Link from "next/link" import Link from "next/link"
import { useState } from "react"
export function IconCard({ export function IconCard({
name, name,
@ -13,16 +14,34 @@ export function IconCard({
data: Icon data: Icon
matchedAlias?: string 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 ( return (
<MagicCard className="rounded-md shadow-md"> <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"> <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"> <div className="relative h-16 w-16 mb-2">
{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 <Image
src={`${BASE_URL}/${iconData.base}/${name}.${iconData.base}`} src={originalSrc} // Fallback src for next/image
alt={`${name} icon`} alt={`${name} icon`}
fill fill
className="object-contain p-1 group-hover:scale-110 transition-transform duration-300" 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> </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"> <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, " ")} {name.replace(/-/g, " ")}