adjust artist page suspense fetching

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,

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<HTMLDivElement>(null);
     const headerRef = useRef<HTMLDivElement>(null);
     const server = useCurrentServer();
@@ -33,20 +33,19 @@ const AlbumArtistDetailRoute = () => {
 
     const routeId = (artistId || albumArtistId) as string;
 
-    const detailQuery = useQuery({
+    const detailQuery = useSuspenseQuery(
-        ...artistsQueries.albumArtistDetail({ query: { id: routeId }, serverId: server?.id }),
+        artistsQueries.albumArtistDetail({ query: { id: routeId }, serverId: server?.id }),
-        staleTime: 0,
+    );
-    });
 
     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 <Spinner container />;
     }
 
@@ -87,7 +86,7 @@ const AlbumArtistDetailRoute = () => {
                                 variant="default"
                             />
                             <LibraryHeaderBar.Title>
-                                {detailQuery?.data?.name}
+                                {detailQuery.data?.name}
                             </LibraryHeaderBar.Title>
                         </LibraryHeaderBar>
                     ),
@@ -107,15 +106,27 @@ const AlbumArtistDetailRoute = () => {
                 )}
                 <LibraryContainer>
                     <AlbumArtistDetailHeader ref={headerRef as React.Ref<HTMLDivElement>} />
-                    <Suspense fallback={<Spinner container />}>
+                    <AlbumArtistDetailContent />
-                        <AlbumArtistDetailContent />
-                    </Suspense>
                 </LibraryContainer>
             </NativeScrollArea>
         </AnimatedPage>
     );
 };
 
+const AlbumArtistDetailRoute = () => {
+    const { albumArtistId, artistId } = useParams() as {
+        albumArtistId?: string;
+        artistId?: string;
+    };
+    const routeId = (artistId || albumArtistId) as string;
+
+    return (
+        <Suspense fallback={<Spinner container />} key={`album-artist-detail-suspense-${routeId}`}>
+            <AlbumArtistDetailRouteContent />
+        </Suspense>
+    );
+};
+
 const AlbumArtistDetailRouteWithBoundary = () => {
     return (
         <PageErrorBoundary>

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',