diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx index 0ec065144..fa3c5012f 100644 --- a/src/renderer/features/artists/components/album-artist-detail-content.tsx +++ b/src/renderer/features/artists/components/album-artist-detail-content.tsx @@ -1,4 +1,4 @@ -import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'; +import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'; import { LayoutGroup, motion } from 'motion/react'; import { useCallback, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -226,7 +226,7 @@ const AlbumArtistMetadataTopSongs = ({ const player = usePlayer(); const serverId = useCurrentServerId(); - const topSongsQuery = useQuery( + const topSongsQuery = useSuspenseQuery( artistsQueries.topSongs({ query: { artist: detailQuery.data?.name || '', artistId: routeId }, serverId: serverId, diff --git a/src/renderer/features/artists/routes/album-artist-detail-route.tsx b/src/renderer/features/artists/routes/album-artist-detail-route.tsx index 97dd98da8..1a3ff8193 100644 --- a/src/renderer/features/artists/routes/album-artist-detail-route.tsx +++ b/src/renderer/features/artists/routes/album-artist-detail-route.tsx @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { Suspense, useRef } from 'react'; import { useParams } from 'react-router'; @@ -20,7 +20,7 @@ import { useCurrentServer, useGeneralSettings } from '/@/renderer/store'; import { Spinner } from '/@/shared/components/spinner/spinner'; import { LibraryItem } from '/@/shared/types/domain-types'; -const AlbumArtistDetailRoute = () => { +const AlbumArtistDetailRouteContent = () => { const scrollAreaRef = useRef(null); const headerRef = useRef(null); const server = useCurrentServer(); @@ -33,20 +33,19 @@ const AlbumArtistDetailRoute = () => { const routeId = (artistId || albumArtistId) as string; - const detailQuery = useQuery({ - ...artistsQueries.albumArtistDetail({ query: { id: routeId }, serverId: server?.id }), - staleTime: 0, - }); + const detailQuery = useSuspenseQuery( + artistsQueries.albumArtistDetail({ query: { id: routeId }, serverId: server?.id }), + ); const imageUrl = useItemImageUrl({ - id: detailQuery?.data?.imageId || undefined, + id: detailQuery.data?.imageId || undefined, imageUrl: detailQuery.data?.imageUrl, itemType: LibraryItem.ALBUM_ARTIST, type: 'header', }); const libraryBackgroundImageUrl = useItemImageUrl({ - id: detailQuery?.data?.imageId || undefined, + id: detailQuery.data?.imageId || undefined, itemType: LibraryItem.ALBUM_ARTIST, type: 'itemCard', }); @@ -56,7 +55,7 @@ const AlbumArtistDetailRoute = () => { const { background: backgroundColor, isLoading: isColorLoading } = useFastAverageColor({ id: artistId, src: selectedImageUrl, - srcLoaded: !detailQuery.isLoading, + srcLoaded: true, }); const background = backgroundColor; @@ -70,7 +69,7 @@ const AlbumArtistDetailRoute = () => { showBlurredImage, }); - if (detailQuery.isLoading || !isReady) { + if (!isReady) { return ; } @@ -87,7 +86,7 @@ const AlbumArtistDetailRoute = () => { variant="default" /> - {detailQuery?.data?.name} + {detailQuery.data?.name} ), @@ -107,15 +106,27 @@ const AlbumArtistDetailRoute = () => { )} } /> - }> - - + ); }; +const AlbumArtistDetailRoute = () => { + const { albumArtistId, artistId } = useParams() as { + albumArtistId?: string; + artistId?: string; + }; + const routeId = (artistId || albumArtistId) as string; + + return ( + } key={`album-artist-detail-suspense-${routeId}`}> + + + ); +}; + const AlbumArtistDetailRouteWithBoundary = () => { return ( diff --git a/src/shared/api/navidrome/navidrome-normalize.ts b/src/shared/api/navidrome/navidrome-normalize.ts index ebf789783..d67f9f51e 100644 --- a/src/shared/api/navidrome/navidrome-normalize.ts +++ b/src/shared/api/navidrome/navidrome-normalize.ts @@ -324,8 +324,6 @@ const normalizeAlbumArtist = ( songCount = item.songCount; } - console.log('similarArtists', item.similarArtists); - return { _itemType: LibraryItem.ALBUM_ARTIST, _serverId: server?.id || 'unknown',