diff --git a/src/renderer/features/albums/routes/album-detail-route.tsx b/src/renderer/features/albums/routes/album-detail-route.tsx index 908723b97..5232c31df 100644 --- a/src/renderer/features/albums/routes/album-detail-route.tsx +++ b/src/renderer/features/albums/routes/album-detail-route.tsx @@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query'; import { useRef } from 'react'; import { useLocation, useParams } from 'react-router'; +import { useItemImageUrl } from '/@/renderer/components/item-image/item-image'; import { NativeScrollArea } from '/@/renderer/components/native-scroll-area/native-scroll-area'; import { albumQueries } from '/@/renderer/features/albums/api/album-api'; import { AlbumDetailContent } from '/@/renderer/features/albums/components/album-detail-content'; @@ -34,9 +35,16 @@ const AlbumDetailRoute = () => { staleTime: 0, }); + const imageUrl = + useItemImageUrl({ + id: albumId, + itemType: LibraryItem.ALBUM, + type: 'itemCard', + }) || ''; + const { background: backgroundColor, isLoading: isColorLoading } = useFastAverageColor({ id: albumId, - src: detailQuery.data?.imageUrl, + src: imageUrl, srcLoaded: !detailQuery.isLoading, }); @@ -45,7 +53,7 @@ const AlbumDetailRoute = () => { const showBlurredImage = albumBackground; const { isReady } = useWaitForColorCalculation({ - hasImage: !!detailQuery.data?.imageUrl, + hasImage: !!imageUrl, isLoading: isColorLoading, routeId: albumId, showBlurredImage, @@ -81,7 +89,7 @@ const AlbumDetailRoute = () => { ) : (