redesign artist page (#416) (#447)

src/renderer/features/artists/routes/album-artist-detail-route.tsx

@@ -1,7 +1,8 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
-import { useRef } from 'react';
+import { Suspense, 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 { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { AlbumArtistDetailContent } from '/@/renderer/features/artists/components/album-artist-detail-content';
@@ -16,6 +17,7 @@ import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { useFastAverageColor, useWaitForColorCalculation } from '/@/renderer/hooks';
 import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
+import { Spinner } from '/@/shared/components/spinner/spinner';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 const AlbumArtistDetailRoute = () => {
@@ -39,9 +41,17 @@ const AlbumArtistDetailRoute = () => {
         staleTime: 0,
     });
 
+    const imageUrl = useItemImageUrl({
+        id: detailQuery?.data?.imageId || undefined,
+        itemType: LibraryItem.ALBUM_ARTIST,
+        type: 'header',
+    });
+
+    const selectedImageUrl = imageUrl || detailQuery.data?.imageUrl;
+
     const { background: backgroundColor, isLoading: isColorLoading } = useFastAverageColor({
         id: artistId,
-        src: detailQuery.data?.imageUrl,
+        src: selectedImageUrl,
         srcLoaded: !detailQuery.isLoading,
     });
 
@@ -50,7 +60,7 @@ const AlbumArtistDetailRoute = () => {
     const showBlurredImage = artistBackground;
 
     const { isReady } = useWaitForColorCalculation({
-        hasImage: !!detailQuery.data?.imageUrl,
+        hasImage: !!selectedImageUrl,
         isLoading: isColorLoading,
         routeId,
         showBlurredImage,
@@ -86,7 +96,7 @@ const AlbumArtistDetailRoute = () => {
                     <LibraryBackgroundImage
                         blur={artistBackgroundBlur}
                         headerRef={headerRef}
-                        imageUrl={detailQuery.data?.imageUrl || ''}
+                        imageUrl={selectedImageUrl || ''}
                     />
                 ) : (
                     <LibraryBackgroundOverlay backgroundColor={background} headerRef={headerRef} />
@@ -103,7 +113,9 @@ const AlbumArtistDetailRoute = () => {
 const AlbumArtistDetailRouteWithBoundary = () => {
     return (
         <PageErrorBoundary>
-            <AlbumArtistDetailRoute />
+            <Suspense fallback={<Spinner container />}>
+                <AlbumArtistDetailRoute />
+            </Suspense>
         </PageErrorBoundary>
     );
 };