move suspense wrapper on carousels in album detail

This commit is contained in:
jeffvli
2025-11-20 12:36:14 -08:00
parent 4b135d7586
commit 427cfe0796
3 changed files with 22 additions and 18 deletions
@@ -398,25 +398,21 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
<Stack gap="lg" mt="3rem">
{cq.height || cq.width ? (
<>
<Suspense fallback={<Spinner container />}>
{carousels
.filter((c) => !c.isHidden)
.map((carousel) => (
<Suspense
fallback={<Spinner container />}
<AlbumInfiniteCarousel
excludeIds={carousel.excludeIds}
key={`carousel-${carousel.uniqueId}`}
>
<AlbumInfiniteCarousel
excludeIds={carousel.excludeIds}
query={carousel.query}
rowCount={1}
sortBy={carousel.sortBy}
sortOrder={carousel.sortOrder}
title={carousel.title}
/>
</Suspense>
query={carousel.query}
rowCount={1}
sortBy={carousel.sortBy}
sortOrder={carousel.sortOrder}
title={carousel.title}
/>
))}
</>
</Suspense>
) : null}
</Stack>
</div>
@@ -27,7 +27,7 @@ interface AlbumCarouselProps {
title: React.ReactNode | string;
}
export function AlbumInfiniteCarousel(props: AlbumCarouselProps) {
const BaseAlbumInfiniteCarousel = (props: AlbumCarouselProps) => {
const { excludeIds, query: additionalQuery, rowCount = 1, sortBy, sortOrder, title } = props;
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
const {
@@ -84,7 +84,11 @@ export function AlbumInfiniteCarousel(props: AlbumCarouselProps) {
title={title}
/>
);
}
};
export const AlbumInfiniteCarousel = (props: AlbumCarouselProps) => {
return <BaseAlbumInfiniteCarousel {...props} />;
};
function useAlbumListInfinite(
sortBy: AlbumListSort,
@@ -27,7 +27,7 @@ interface AlbumArtistCarouselProps {
title: React.ReactNode | string;
}
export function AlbumArtistInfiniteCarousel(props: AlbumArtistCarouselProps) {
export const BaseAlbumArtistInfiniteCarousel = (props: AlbumArtistCarouselProps) => {
const { excludeIds, query: additionalQuery, rowCount = 1, sortBy, sortOrder, title } = props;
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST);
const {
@@ -86,7 +86,11 @@ export function AlbumArtistInfiniteCarousel(props: AlbumArtistCarouselProps) {
title={title}
/>
);
}
};
export const AlbumArtistInfiniteCarousel = (props: AlbumArtistCarouselProps) => {
return <BaseAlbumArtistInfiniteCarousel {...props} />;
};
function useAlbumArtistListInfinite(
sortBy: AlbumArtistListSort,