From d78ea440ccd020a9935a83b7fd2521c239f2a33e Mon Sep 17 00:00:00 2001 From: jeffvli Date: Wed, 11 Mar 2026 19:41:04 -0700 Subject: [PATCH] set low fetchPriority for carousel images --- .../grid-carousel/grid-carousel.module.css | 7 +++++++ src/renderer/components/item-card/item-card.tsx | 12 ++++++++++++ .../albums/components/album-grid-carousel.tsx | 1 + .../albums/components/album-infinite-carousel.tsx | 1 + .../components/album-artist-infinite-carousel.tsx | 1 + .../songs/components/song-infinite-carousel.tsx | 1 + 6 files changed, 23 insertions(+) diff --git a/src/renderer/components/grid-carousel/grid-carousel.module.css b/src/renderer/components/grid-carousel/grid-carousel.module.css index d28b25e28..63b3eeb0e 100644 --- a/src/renderer/components/grid-carousel/grid-carousel.module.css +++ b/src/renderer/components/grid-carousel/grid-carousel.module.css @@ -40,7 +40,14 @@ display: grid; grid-template-columns: repeat(var(--cards-to-show, 2), minmax(0, 1fr)); gap: var(--theme-spacing-md); + contain: layout paint; + content-visibility: auto; overflow: hidden; + will-change: transform; +} + +.card { + min-height: 0; } .page-indicator { diff --git a/src/renderer/components/item-card/item-card.tsx b/src/renderer/components/item-card/item-card.tsx index cf7ce6792..38ed58539 100644 --- a/src/renderer/components/item-card/item-card.tsx +++ b/src/renderer/components/item-card/item-card.tsx @@ -64,6 +64,7 @@ export interface ItemCardProps { enableMultiSelect?: boolean; enableNavigation?: boolean; imageAsLink?: boolean; + imageFetchPriority?: 'auto' | 'high' | 'low'; internalState?: ItemListStateActions; isRound?: boolean; itemType: LibraryItem; @@ -80,6 +81,7 @@ export const ItemCard = ({ enableMultiSelect, enableNavigation = true, imageAsLink, + imageFetchPriority, internalState, isRound, itemType, @@ -102,6 +104,7 @@ export const ItemCard = ({ enableMultiSelect={enableMultiSelect} enableNavigation={enableNavigation} imageAsLink={imageAsLink} + imageFetchPriority={imageFetchPriority} imageUrl={imageUrl} internalState={internalState} isRound={isRound} @@ -121,6 +124,7 @@ export const ItemCard = ({ enableMultiSelect={enableMultiSelect} enableNavigation={enableNavigation} imageAsLink={imageAsLink} + imageFetchPriority={imageFetchPriority} imageUrl={imageUrl} internalState={internalState} isRound={isRound} @@ -140,6 +144,7 @@ export const ItemCard = ({ enableExpansion={enableExpansion} enableNavigation={enableNavigation} imageAsLink={imageAsLink} + imageFetchPriority={imageFetchPriority} imageUrl={imageUrl} internalState={internalState} isRound={isRound} @@ -157,6 +162,7 @@ export interface ItemCardDerivativeProps extends Omit { enableExpansion?: boolean; enableNavigation?: boolean; imageAsLink?: boolean; + imageFetchPriority?: 'auto' | 'high' | 'low'; imageUrl: string | undefined; internalState?: ItemListStateActions; rows: DataRow[]; @@ -171,6 +177,7 @@ const CompactItemCard = ({ enableMultiSelect, enableNavigation, imageAsLink, + imageFetchPriority, internalState, isRound, itemType, @@ -365,6 +372,7 @@ const CompactItemCard = ({ explicitStatus={ 'explicitStatus' in data && data ? data.explicitStatus : null } + fetchPriority={imageFetchPriority} id={data?.imageId} itemType={itemType} src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl} @@ -475,6 +483,7 @@ const DefaultItemCard = ({ enableExpansion, enableNavigation, imageAsLink, + imageFetchPriority, internalState, isRound, itemType, @@ -602,6 +611,7 @@ const DefaultItemCard = ({ explicitStatus={ 'explicitStatus' in data && data ? data.explicitStatus : null } + fetchPriority={imageFetchPriority} id={data?.imageId} itemType={itemType} src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl} @@ -710,6 +720,7 @@ const PosterItemCard = ({ enableMultiSelect, enableNavigation, imageAsLink, + imageFetchPriority, internalState, isRound, itemType, @@ -902,6 +913,7 @@ const PosterItemCard = ({ explicitStatus={ 'explicitStatus' in data && data ? data.explicitStatus : null } + fetchPriority={imageFetchPriority} id={(data as { imageId: string })?.imageId} itemType={itemType} src={(data as { imageUrl: string })?.imageUrl} diff --git a/src/renderer/features/albums/components/album-grid-carousel.tsx b/src/renderer/features/albums/components/album-grid-carousel.tsx index 28f99c55d..96a26b0be 100644 --- a/src/renderer/features/albums/components/album-grid-carousel.tsx +++ b/src/renderer/features/albums/components/album-grid-carousel.tsx @@ -31,6 +31,7 @@ export function AlbumGridCarousel(props: AlbumGridCarouselProps) { data={album} enableDrag enableExpansion + imageFetchPriority="low" itemType={LibraryItem.ALBUM} rows={rows} type="poster" diff --git a/src/renderer/features/albums/components/album-infinite-carousel.tsx b/src/renderer/features/albums/components/album-infinite-carousel.tsx index 02be4e9ea..4669de2f1 100644 --- a/src/renderer/features/albums/components/album-infinite-carousel.tsx +++ b/src/renderer/features/albums/components/album-infinite-carousel.tsx @@ -70,6 +70,7 @@ const BaseAlbumInfiniteCarousel = (props: AlbumCarouselProps & { rows: DataRow[] data={album} enableDrag enableExpansion + imageFetchPriority="low" itemType={LibraryItem.ALBUM} rows={rows} type="poster" diff --git a/src/renderer/features/artists/components/album-artist-infinite-carousel.tsx b/src/renderer/features/artists/components/album-artist-infinite-carousel.tsx index 3084ec70b..272f3e655 100644 --- a/src/renderer/features/artists/components/album-artist-infinite-carousel.tsx +++ b/src/renderer/features/artists/components/album-artist-infinite-carousel.tsx @@ -69,6 +69,7 @@ const BaseAlbumArtistInfiniteCarousel = (props: AlbumArtistCarouselProps & { row controls={controls} data={albumArtist} enableDrag + imageFetchPriority="low" itemType={LibraryItem.ALBUM_ARTIST} rows={rows} type="poster" diff --git a/src/renderer/features/songs/components/song-infinite-carousel.tsx b/src/renderer/features/songs/components/song-infinite-carousel.tsx index f18f95860..d5cd40c73 100644 --- a/src/renderer/features/songs/components/song-infinite-carousel.tsx +++ b/src/renderer/features/songs/components/song-infinite-carousel.tsx @@ -86,6 +86,7 @@ const BaseSongInfiniteCarousel = (props: SongCarouselProps & { rows: DataRow[] } controls={controls} data={song} enableDrag + imageFetchPriority="low" itemType={LibraryItem.SONG} rows={rows} type="poster"