update album artist page

src/renderer/features/artists/components/album-artist-detail-content.module.css

@@ -1,12 +1,12 @@
 .content-container {
     position: relative;
     z-index: 0;
+    container-type: inline-size;
 }
 
 .detail-container {
     display: flex;
     flex-direction: column;
-    gap: var(--theme-spacing-lg);
+    gap: var(--theme-spacing-2xl);
     padding: 1rem 2rem 5rem;
-    overflow: hidden;
 }

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { Suspense, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createSearchParams, generatePath, Link, useParams } from 'react-router';
@@ -25,15 +25,253 @@ import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Spoiler } from '/@/shared/components/spoiler/spoiler';
 import { Stack } from '/@/shared/components/stack/stack';
 import { TextTitle } from '/@/shared/components/text-title/text-title';
+import { Text } from '/@/shared/components/text/text';
 import {
     AlbumArtist,
     AlbumListSort,
     LibraryItem,
     ServerType,
     SortOrder,
+    TopSongListResponse,
 } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
+interface AlbumArtistActionButtonsProps {
+    albumCount: null | number | undefined;
+    artistDiscographyLink: string;
+    artistSongsLink: string;
+    onFavorite: () => void;
+    onMoreOptions: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onPlay: () => void;
+    userFavorite?: boolean;
+}
+
+const AlbumArtistActionButtons = ({
+    albumCount,
+    artistDiscographyLink,
+    artistSongsLink,
+    onFavorite,
+    onMoreOptions,
+    onPlay,
+    userFavorite,
+}: AlbumArtistActionButtonsProps) => {
+    const { t } = useTranslation();
+
+    return (
+        <>
+            <Group gap="md">
+                <DefaultPlayButton disabled={albumCount === 0} onClick={onPlay} />
+                <Group gap="xs">
+                    <ActionIcon
+                        icon="favorite"
+                        iconProps={{
+                            fill: userFavorite ? 'primary' : undefined,
+                        }}
+                        onClick={onFavorite}
+                        size="lg"
+                        variant="transparent"
+                    />
+                    <ActionIcon
+                        icon="ellipsisHorizontal"
+                        onClick={onMoreOptions}
+                        size="lg"
+                        variant="transparent"
+                    />
+                </Group>
+            </Group>
+            <Group gap="md">
+                <Button
+                    component={Link}
+                    size="compact-md"
+                    to={artistDiscographyLink}
+                    variant="subtle"
+                >
+                    {String(t('page.albumArtistDetail.viewDiscography')).toUpperCase()}
+                </Button>
+                <Button component={Link} size="compact-md" to={artistSongsLink} variant="subtle">
+                    {String(t('page.albumArtistDetail.viewAllTracks')).toUpperCase()}
+                </Button>
+            </Group>
+        </>
+    );
+};
+
+interface AlbumArtistMetadataGenresProps {
+    genres?: Array<{ id: string; name: string }>;
+}
+
+const AlbumArtistMetadataGenres = ({ genres }: AlbumArtistMetadataGenresProps) => {
+    const { t } = useTranslation();
+    const genrePath = useGenreRoute();
+
+    if (!genres || genres.length === 0) return null;
+
+    return (
+        <Stack gap="xs">
+            <Text fw={600} isNoSelect size="sm" tt="uppercase">
+                {t('entity.genre', {
+                    count: genres.length,
+                })}
+            </Text>
+            <Group gap="sm">
+                {genres.map((genre) => (
+                    <Button
+                        component={Link}
+                        key={`genre-${genre.id}`}
+                        radius="md"
+                        size="compact-md"
+                        to={generatePath(genrePath, {
+                            albumArtistId: null,
+                            albumId: null,
+                            artistId: null,
+                            genreId: genre.id,
+                            itemType: null,
+                            playlistId: null,
+                        })}
+                        variant="outline"
+                    >
+                        {genre.name}
+                    </Button>
+                ))}
+            </Group>
+        </Stack>
+    );
+};
+
+interface AlbumArtistMetadataBiographyProps {
+    artistName?: string;
+    biography: null | string | undefined;
+}
+
+const AlbumArtistMetadataBiography = ({
+    artistName,
+    biography,
+}: AlbumArtistMetadataBiographyProps) => {
+    const { t } = useTranslation();
+
+    if (!biography) return null;
+
+    const sanitizedBiography = sanitize(biography);
+
+    return (
+        <section style={{ maxWidth: '1280px' }}>
+            <TextTitle fw={700} order={2}>
+                {t('page.albumArtistDetail.about', {
+                    artist: artistName,
+                })}
+            </TextTitle>
+            <Spoiler dangerouslySetInnerHTML={{ __html: sanitizedBiography }} />
+        </section>
+    );
+};
+
+interface AlbumArtistMetadataTopSongsProps {
+    routeId: string;
+    topSongsQuery: ReturnType<typeof useQuery<TopSongListResponse>>;
+}
+
+const AlbumArtistMetadataTopSongs = ({
+    routeId,
+    topSongsQuery,
+}: AlbumArtistMetadataTopSongsProps) => {
+    const { t } = useTranslation();
+
+    if (!topSongsQuery?.data?.items?.length) return null;
+
+    return (
+        <section>
+            <Group justify="space-between" wrap="nowrap">
+                <Group align="flex-end" wrap="nowrap">
+                    <TextTitle fw={700} order={2}>
+                        {t('page.albumArtistDetail.topSongs', {
+                            postProcess: 'sentenceCase',
+                        })}
+                    </TextTitle>
+                    <Button
+                        component={Link}
+                        size="compact-md"
+                        to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS, {
+                            albumArtistId: routeId,
+                        })}
+                        uppercase
+                        variant="subtle"
+                    >
+                        {t('page.albumArtistDetail.viewAll', {
+                            postProcess: 'sentenceCase',
+                        })}
+                    </Button>
+                </Group>
+            </Group>
+        </section>
+    );
+};
+
+interface AlbumArtistMetadataExternalLinksProps {
+    artistName?: string;
+    externalLinks: boolean;
+    lastFM: boolean;
+    mbzId?: null | string;
+    musicBrainz: boolean;
+}
+
+const AlbumArtistMetadataExternalLinks = ({
+    artistName,
+    externalLinks,
+    lastFM,
+    mbzId,
+    musicBrainz,
+}: AlbumArtistMetadataExternalLinksProps) => {
+    const { t } = useTranslation();
+
+    if (!externalLinks || (!lastFM && !musicBrainz)) return null;
+
+    return (
+        <Stack gap="xs">
+            <Text fw={600} isNoSelect size="sm" tt="uppercase">
+                {t('common.externalLinks', {
+                    postProcess: 'sentenceCase',
+                })}
+            </Text>
+            <Group gap="sm">
+                {lastFM && (
+                    <ActionIcon
+                        component="a"
+                        href={`https://www.last.fm/music/${encodeURIComponent(artistName || '')}`}
+                        icon="brandLastfm"
+                        iconProps={{
+                            fill: 'default',
+                            size: 'xl',
+                        }}
+                        rel="noopener noreferrer"
+                        target="_blank"
+                        tooltip={{
+                            label: t('action.openIn.lastfm'),
+                        }}
+                        variant="subtle"
+                    />
+                )}
+                {mbzId && musicBrainz ? (
+                    <ActionIcon
+                        component="a"
+                        href={`https://musicbrainz.org/artist/${mbzId}`}
+                        icon="brandMusicBrainz"
+                        iconProps={{
+                            fill: 'default',
+                            size: 'xl',
+                        }}
+                        rel="noopener noreferrer"
+                        target="_blank"
+                        tooltip={{
+                            label: t('action.openIn.musicbrainz'),
+                        }}
+                        variant="subtle"
+                    />
+                ) : null}
+            </Group>
+        </Stack>
+    );
+};
+
 export const AlbumArtistDetailContent = () => {
     const { t } = useTranslation();
     const { artistItems, externalLinks, lastFM, musicBrainz } = useGeneralSettings();
@@ -42,10 +280,9 @@ export const AlbumArtistDetailContent = () => {
         artistId?: string;
     };
     const routeId = (artistId || albumArtistId) as string;
-    const { ref } = useContainerQuery();
+    const { ref, ...cq } = useContainerQuery();
     const { addToQueueByFetch, setFavorite } = usePlayer();
     const server = useCurrentServer();
-    const genrePath = useGenreRoute();
 
     const [enabledItem, itemOrder] = useMemo(() => {
         const enabled: { [key in ArtistItem]?: boolean } = {};
@@ -59,7 +296,7 @@ export const AlbumArtistDetailContent = () => {
         return [enabled, order];
     }, [artistItems]);
 
-    const detailQuery = useQuery(
+    const detailQuery = useSuspenseQuery(
         artistsQueries.albumArtistDetail({
             query: { id: routeId },
             serverId: server?.id,
@@ -73,23 +310,23 @@ export const AlbumArtistDetailContent = () => {
         },
     )}?${createSearchParams({
         artistId: routeId,
-        artistName: detailQuery?.data?.name || '',
+        artistName: detailQuery.data?.name || '',
     })}`;
 
     const artistSongsLink = `${generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS, {
         albumArtistId: routeId,
     })}?${createSearchParams({
         artistId: routeId,
-        artistName: detailQuery?.data?.name || '',
+        artistName: detailQuery.data?.name || '',
     })}`;
 
     const topSongsQuery = useQuery(
         artistsQueries.topSongs({
             options: {
-                enabled: !!detailQuery?.data?.name && enabledItem.topSongs,
+                enabled: !!detailQuery.data?.name && enabledItem.topSongs,
             },
             query: {
-                artist: detailQuery?.data?.name || '',
+                artist: detailQuery.data?.name || '',
                 artistId: routeId,
             },
             serverId: server?.id,
@@ -106,6 +343,7 @@ export const AlbumArtistDetailContent = () => {
                     artistIds: routeId ? [routeId] : undefined,
                     compilation: false,
                 },
+                rowCount: 2,
                 sortBy: AlbumListSort.RELEASE_DATE,
                 sortOrder: SortOrder.DESC,
                 title: (
@@ -136,6 +374,7 @@ export const AlbumArtistDetailContent = () => {
                     artistIds: routeId ? [routeId] : undefined,
                     compilation: true,
                 },
+                rowCount: 1,
                 sortBy: AlbumListSort.RELEASE_DATE,
                 sortOrder: SortOrder.DESC,
                 title: (
@@ -146,10 +385,11 @@ export const AlbumArtistDetailContent = () => {
                 uniqueId: 'compilationAlbums',
             },
             {
-                data: (detailQuery?.data?.similarArtists || []) as AlbumArtist[],
+                data: (detailQuery.data?.similarArtists || []) as AlbumArtist[],
-                isHidden: !detailQuery?.data?.similarArtists || !enabledItem.similarArtists,
+                isHidden: !detailQuery.data?.similarArtists || !enabledItem.similarArtists,
                 itemType: LibraryItem.ALBUM_ARTIST,
                 order: itemOrder.similarArtists,
+                rowCount: 1,
                 title: (
                     <TextTitle fw={700} order={2}>
                         {t('page.albumArtistDetail.relatedArtists', {
@@ -162,7 +402,7 @@ export const AlbumArtistDetailContent = () => {
         ];
     }, [
         artistDiscographyLink,
-        detailQuery?.data?.similarArtists,
+        detailQuery.data?.similarArtists,
         enabledItem.compilations,
         enabledItem.recentAlbums,
         enabledItem.similarArtists,
@@ -187,7 +427,7 @@ export const AlbumArtistDetailContent = () => {
     };
 
     const handleFavorite = () => {
-        if (!detailQuery?.data) return;
+        if (!detailQuery.data) return;
         setFavorite(
             detailQuery.data._serverId,
             [detailQuery.data.id],
@@ -197,221 +437,105 @@ export const AlbumArtistDetailContent = () => {
     };
 
     const handleMoreOptions = (e: React.MouseEvent<HTMLButtonElement>) => {
-        if (!detailQuery?.data) return;
+        if (!detailQuery.data) return;
         ContextMenuController.call({
             cmd: { items: [detailQuery.data], type: LibraryItem.ALBUM_ARTIST },
             event: e,
         });
     };
 
-    const albumCount = detailQuery?.data?.albumCount;
+    const albumCount = detailQuery.data?.albumCount;
+    const biography =
+        detailQuery.data?.biography && enabledItem.biography ? detailQuery.data.biography : null;
+    const showGenres = detailQuery.data?.genres ? detailQuery.data.genres.length !== 0 : false;
+    const mbzId = detailQuery.data?.mbz;
 
-    const biography = useMemo(() => {
+    // Calculate order for genres and external links (show before other sections)
-        const bio = detailQuery?.data?.biography;
+    // Use a very low order number to ensure they appear first
-
+    const genresOrder = 0;
-        if (!bio || !enabledItem.biography) return null;
+    const externalLinksOrder = 0.5;
-        return sanitize(bio);
-    }, [detailQuery?.data?.biography, enabledItem.biography]);
-
-    const showTopSongs = topSongsQuery?.data?.items?.length && enabledItem.topSongs;
-    const showGenres = detailQuery?.data?.genres ? detailQuery?.data?.genres.length !== 0 : false;
-    const mbzId = detailQuery?.data?.mbz;
-
-    const isLoading =
-        detailQuery?.isLoading ||
-        (server?.type === ServerType.NAVIDROME && enabledItem.topSongs && topSongsQuery?.isLoading);
-
-    if (isLoading) return <div className={styles.contentContainer} ref={ref} />;
 
     return (
         <div className={styles.contentContainer} ref={ref}>
             <div className={styles.detailContainer}>
-                <Group gap="md">
+                <AlbumArtistActionButtons
-                    <DefaultPlayButton
+                    albumCount={albumCount}
-                        disabled={albumCount === 0}
+                    artistDiscographyLink={artistDiscographyLink}
-                        onClick={() => handlePlay(playButtonBehavior)}
+                    artistSongsLink={artistSongsLink}
-                    />
+                    onFavorite={handleFavorite}
-                    <Group gap="xs">
+                    onMoreOptions={handleMoreOptions}
-                        <ActionIcon
+                    onPlay={() => handlePlay(playButtonBehavior)}
-                            icon="favorite"
+                    userFavorite={detailQuery.data?.userFavorite}
-                            iconProps={{
+                />
-                                fill: detailQuery?.data?.userFavorite ? 'primary' : undefined,
-                            }}
-                            onClick={handleFavorite}
-                            size="lg"
-                            variant="transparent"
-                        />
-                        <ActionIcon
-                            icon="ellipsisHorizontal"
-                            onClick={handleMoreOptions}
-                            size="lg"
-                            variant="transparent"
-                        />
-                    </Group>
-                </Group>
-                <Group gap="md">
-                    <Button
-                        component={Link}
-                        size="compact-md"
-                        to={artistDiscographyLink}
-                        variant="subtle"
-                    >
-                        {String(t('page.albumArtistDetail.viewDiscography')).toUpperCase()}
-                    </Button>
-                    <Button
-                        component={Link}
-                        size="compact-md"
-                        to={artistSongsLink}
-                        variant="subtle"
-                    >
-                        {String(t('page.albumArtistDetail.viewAllTracks')).toUpperCase()}
-                    </Button>
-                </Group>
-                {showGenres ? (
-                    <section>
-                        <Group gap="sm">
-                            {detailQuery?.data?.genres?.map((genre) => (
-                                <Button
-                                    component={Link}
-                                    key={`genre-${genre.id}`}
-                                    radius="md"
-                                    size="compact-md"
-                                    to={generatePath(genrePath, {
-                                        genreId: genre.id,
-                                    })}
-                                    variant="outline"
-                                >
-                                    {genre.name}
-                                </Button>
-                            ))}
-                        </Group>
-                    </section>
-                ) : null}
-                {externalLinks && (lastFM || musicBrainz) ? (
-                    <section>
-                        <Group gap="sm">
-                            {lastFM && (
-                                <ActionIcon
-                                    component="a"
-                                    href={`https://www.last.fm/music/${encodeURIComponent(
-                                        detailQuery?.data?.name || '',
-                                    )}`}
-                                    icon="brandLastfm"
-                                    iconProps={{
-                                        fill: 'default',
-                                        size: 'xl',
-                                    }}
-                                    rel="noopener noreferrer"
-                                    target="_blank"
-                                    tooltip={{
-                                        label: t('action.openIn.lastfm'),
-                                    }}
-                                    variant="subtle"
-                                />
-                            )}
-                            {mbzId && musicBrainz ? (
-                                <ActionIcon
-                                    component="a"
-                                    href={`https://musicbrainz.org/artist/${mbzId}`}
-                                    icon="brandMusicBrainz"
-                                    iconProps={{
-                                        fill: 'default',
-                                        size: 'xl',
-                                    }}
-                                    rel="noopener noreferrer"
-                                    target="_blank"
-                                    tooltip={{
-                                        label: t('action.openIn.musicbrainz'),
-                                    }}
-                                    variant="subtle"
-                                />
-                            ) : null}
-                        </Group>
-                    </section>
-                ) : null}
                 <Grid gutter="xl">
-                    {biography ? (
+                    {showGenres && (
+                        <Grid.Col order={genresOrder} span={12}>
+                            <AlbumArtistMetadataGenres genres={detailQuery.data?.genres} />
+                        </Grid.Col>
+                    )}
+                    {externalLinks && (lastFM || musicBrainz) && (
+                        <Grid.Col order={externalLinksOrder} span={12}>
+                            <AlbumArtistMetadataExternalLinks
+                                artistName={detailQuery.data?.name}
+                                externalLinks={externalLinks}
+                                lastFM={lastFM}
+                                mbzId={mbzId}
+                                musicBrainz={musicBrainz}
+                            />
+                        </Grid.Col>
+                    )}
+                    {biography && (
                         <Grid.Col order={itemOrder.biography} span={12}>
-                            <section style={{ maxWidth: '1280px' }}>
+                            <AlbumArtistMetadataBiography
-                                <TextTitle fw={700} order={2}>
+                                artistName={detailQuery.data?.name}
-                                    {t('page.albumArtistDetail.about', {
+                                biography={biography}
-                                        artist: detailQuery?.data?.name,
+                            />
-                                    })}
-                                </TextTitle>
-                                <Spoiler dangerouslySetInnerHTML={{ __html: biography }} />
-                            </section>
                         </Grid.Col>
-                    ) : null}
+                    )}
-                    {showTopSongs ? (
+                    {Boolean(topSongsQuery?.data?.items?.length) && enabledItem.topSongs && (
                         <Grid.Col order={itemOrder.topSongs} span={12}>
-                            <section>
+                            <AlbumArtistMetadataTopSongs
-                                <Group justify="space-between" wrap="nowrap">
+                                routeId={routeId}
-                                    <Group align="flex-end" wrap="nowrap">
+                                topSongsQuery={topSongsQuery}
-                                        <TextTitle fw={700} order={2}>
+                            />
-                                            {t('page.albumArtistDetail.topSongs', {
-                                                postProcess: 'sentenceCase',
-                                            })}
-                                        </TextTitle>
-                                        <Button
-                                            component={Link}
-                                            size="compact-md"
-                                            to={generatePath(
-                                                AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS,
-                                                {
-                                                    albumArtistId: routeId,
-                                                },
-                                            )}
-                                            uppercase
-                                            variant="subtle"
-                                        >
-                                            {t('page.albumArtistDetail.viewAll', {
-                                                postProcess: 'sentenceCase',
-                                            })}
-                                        </Button>
-                                    </Group>
-                                </Group>
-                            </section>
                         </Grid.Col>
-                    ) : null}
+                    )}
-
+                    {cq.height || cq.width
-                    {carousels
+                        ? carousels
-                        .filter((c) => !c.isHidden)
+                              .filter((c) => !c.isHidden)
-                        .map((carousel) => (
+                              .map((carousel) => (
-                            <Grid.Col
+                                  <Grid.Col
-                                key={`carousel-${carousel.uniqueId}`}
+                                      key={`carousel-${carousel.uniqueId}`}
-                                order={carousel.order}
+                                      order={carousel.order}
-                                span={12}
+                                      span={12}
-                            >
+                                  >
-                                <section>
+                                      <Suspense fallback={<Spinner container />}>
-                                    <Stack gap="xl">
+                                          {carousel.itemType === LibraryItem.ALBUM ? (
-                                        {carousel.itemType === LibraryItem.ALBUM ? (
+                                              'query' in carousel &&
-                                            'query' in carousel &&
+                                              carousel.query &&
-                                            carousel.query &&
+                                              carousel.sortBy &&
-                                            carousel.sortBy &&
+                                              carousel.sortOrder ? (
-                                            carousel.sortOrder ? (
+                                                  <AlbumInfiniteCarousel
-                                                <Suspense fallback={<Spinner container />}>
+                                                      query={carousel.query}
-                                                    <AlbumInfiniteCarousel
+                                                      rowCount={carousel.rowCount}
-                                                        query={carousel.query}
+                                                      sortBy={carousel.sortBy}
-                                                        rowCount={1}
+                                                      sortOrder={carousel.sortOrder}
-                                                        sortBy={carousel.sortBy}
+                                                      title={carousel.title}
-                                                        sortOrder={carousel.sortOrder}
+                                                  />
-                                                        title={carousel.title}
+                                              ) : null
-                                                    />
+                                          ) : carousel.itemType === LibraryItem.ALBUM_ARTIST ? (
-                                                </Suspense>
+                                              'data' in carousel && carousel.data ? (
-                                            ) : null
+                                                  <AlbumArtistGridCarousel
-                                        ) : carousel.itemType === LibraryItem.ALBUM_ARTIST ? (
+                                                      data={carousel.data}
-                                            'data' in carousel && carousel.data ? (
+                                                      rowCount={carousel.rowCount}
-                                                <AlbumArtistGridCarousel
+                                                      title={carousel.title}
-                                                    data={carousel.data}
+                                                  />
-                                                    rowCount={1}
+                                              ) : null
-                                                    title={carousel.title}
+                                          ) : null}
-                                                />
+                                      </Suspense>
-                                            ) : null
+                                  </Grid.Col>
-                                        ) : null}
+                              ))
-                                    </Stack>
+                        : null}
-                                </section>
-                            </Grid.Col>
-                        ))}
                 </Grid>
             </div>
         </div>

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 { useRef } from 'react';
 import { useLocation, useParams } from 'react-router';
 
@@ -33,11 +33,8 @@ const AlbumArtistDetailRoute = () => {
 
     const location = useLocation();
 
-    const detailQuery = useQuery({
+    const detailQuery = useSuspenseQuery({
-        ...artistsQueries.albumArtistDetail({
+        ...artistsQueries.albumArtistDetail({ query: { id: routeId }, serverId: server?.id }),
-            query: { id: routeId },
-            serverId: server?.id,
-        }),
         initialData: location.state?.item,
         staleTime: 0,
     });
@@ -49,6 +46,7 @@ const AlbumArtistDetailRoute = () => {
     });
 
     const background = backgroundColor;
+
     const showBlurredImage = Boolean(detailQuery.data?.imageUrl) && artistBackground;
 
     return (
@@ -61,6 +59,7 @@ const AlbumArtistDetailRoute = () => {
                             <LibraryHeaderBar.PlayButton
                                 ids={[routeId]}
                                 itemType={LibraryItem.ALBUM_ARTIST}
+                                variant="default"
                             />
                             <LibraryHeaderBar.Title>
                                 {detailQuery?.data?.name}
@@ -72,11 +71,11 @@ const AlbumArtistDetailRoute = () => {
                 }}
                 ref={scrollAreaRef}
             >
-                {showBlurredImage && detailQuery.data?.imageUrl ? (
+                {showBlurredImage ? (
                     <LibraryBackgroundImage
                         blur={artistBackgroundBlur}
                         headerRef={headerRef}
-                        imageUrl={detailQuery.data.imageUrl}
+                        imageUrl={detailQuery.data?.imageUrl || ''}
                     />
                 ) : (
                     <LibraryBackgroundOverlay backgroundColor={background} headerRef={headerRef} />

src/renderer/features/shared/components/library-header.module.css

@@ -10,7 +10,6 @@
     width: 100%;
     max-width: 100%;
     height: auto;
-    min-height: 340px;
     padding: 2rem 1rem;
 
     :global(.item-image-placeholder) {

src/renderer/features/shared/components/library-header.tsx

@@ -101,6 +101,7 @@ export const LibraryHeader = forwardRef(
                             alt="cover"
                             className={styles.image}
                             containerClassName={styles.image}
+                            key={imageUrl}
                             loading="eager"
                             onError={onImageError}
                             src={imageUrl || ''}