move suspense wrapper on carousels in album detail

src/renderer/features/albums/components/album-detail-content.tsx

@@ -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 />}
-                                        key={`carousel-${carousel.uniqueId}`}
-                                    >
                                     <AlbumInfiniteCarousel
                                         excludeIds={carousel.excludeIds}
+                                        key={`carousel-${carousel.uniqueId}`}
                                         query={carousel.query}
                                         rowCount={1}
                                         sortBy={carousel.sortBy}
                                         sortOrder={carousel.sortOrder}
                                         title={carousel.title}
                                     />
-                                    </Suspense>
                                 ))}
-                        </>
+                        </Suspense>
                     ) : null}
                 </Stack>
             </div>

src/renderer/features/albums/components/album-infinite-carousel.tsx

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

src/renderer/features/artists/components/album-artist-infinite-carousel.tsx

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