- {albums.map((album) => (
+ {albums.map((album, index) => (
))}
diff --git a/app/components/album-artwork.tsx b/app/components/album-artwork.tsx
index cc8d4bb..c7efa3b 100644
--- a/app/components/album-artwork.tsx
+++ b/app/components/album-artwork.tsx
@@ -36,6 +36,7 @@ interface AlbumArtworkProps extends Omit<
aspectRatio?: "portrait" | "square"
width?: number
height?: number
+ loading?: 'eager' | 'lazy'
}
export function AlbumArtwork({
@@ -43,6 +44,7 @@ export function AlbumArtwork({
aspectRatio = "portrait",
width,
height,
+ loading = 'lazy',
className,
...props
}: AlbumArtworkProps) {
@@ -160,7 +162,7 @@ export function AlbumArtwork({
onLoad={handleImageLoad}
onError={handleImageError}
priority={false}
- loading="lazy"
+ loading={loading}
/>
) : (
diff --git a/app/components/artist-icon.tsx b/app/components/artist-icon.tsx
index 076a7ea..cc510a3 100644
--- a/app/components/artist-icon.tsx
+++ b/app/components/artist-icon.tsx
@@ -27,6 +27,7 @@ interface ArtistIconProps extends React.HTMLAttributes {
size?: number
imageOnly?: boolean
responsive?: boolean
+ loading?: 'eager' | 'lazy'
}
export function ArtistIcon({
@@ -34,6 +35,7 @@ export function ArtistIcon({
size = 150,
imageOnly = false,
responsive = false,
+ loading = 'lazy',
className,
...props
}: ArtistIconProps) {
@@ -77,6 +79,7 @@ export function ArtistIcon({
width={size}
height={size}
className="w-full h-full object-cover transition-all hover:scale-105"
+ loading={loading}
/>
);
@@ -116,6 +119,7 @@ export function ArtistIcon({
}
)}
className={isResponsive ? "object-cover" : "object-cover w-full h-full"}
+ loading={loading}
/>