fix artist page initial fetch

This commit is contained in:
jeffvli
2025-12-27 14:57:58 -08:00
parent 856400048b
commit acfc106f40
@@ -1,6 +1,6 @@
import { useSuspenseQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { Suspense, useRef } from 'react'; import { Suspense, useRef } from 'react';
import { useLocation, useParams } from 'react-router'; import { useParams } from 'react-router';
import { useItemImageUrl } from '/@/renderer/components/item-image/item-image'; import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { NativeScrollArea } from '/@/renderer/components/native-scroll-area/native-scroll-area'; import { NativeScrollArea } from '/@/renderer/components/native-scroll-area/native-scroll-area';
@@ -33,11 +33,8 @@ const AlbumArtistDetailRoute = () => {
const routeId = (artistId || albumArtistId) as string; const routeId = (artistId || albumArtistId) as string;
const location = useLocation(); const detailQuery = useQuery({
const detailQuery = useSuspenseQuery({
...artistsQueries.albumArtistDetail({ query: { id: routeId }, serverId: server?.id }), ...artistsQueries.albumArtistDetail({ query: { id: routeId }, serverId: server?.id }),
initialData: location.state?.item,
staleTime: 0, staleTime: 0,
}); });
@@ -66,8 +63,8 @@ const AlbumArtistDetailRoute = () => {
showBlurredImage, showBlurredImage,
}); });
if (!isReady) { if (detailQuery.isLoading || !isReady) {
return null; return <Spinner container />;
} }
return ( return (
@@ -103,7 +100,9 @@ const AlbumArtistDetailRoute = () => {
)} )}
<LibraryContainer> <LibraryContainer>
<AlbumArtistDetailHeader ref={headerRef as React.Ref<HTMLDivElement>} /> <AlbumArtistDetailHeader ref={headerRef as React.Ref<HTMLDivElement>} />
<AlbumArtistDetailContent /> <Suspense fallback={<Spinner container />}>
<AlbumArtistDetailContent />
</Suspense>
</LibraryContainer> </LibraryContainer>
</NativeScrollArea> </NativeScrollArea>
</AnimatedPage> </AnimatedPage>
@@ -113,9 +112,7 @@ const AlbumArtistDetailRoute = () => {
const AlbumArtistDetailRouteWithBoundary = () => { const AlbumArtistDetailRouteWithBoundary = () => {
return ( return (
<PageErrorBoundary> <PageErrorBoundary>
<Suspense fallback={<Spinner container />}> <AlbumArtistDetailRoute />
<AlbumArtistDetailRoute />
</Suspense>
</PageErrorBoundary> </PageErrorBoundary>
); );
}; };