vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-12 23:32:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve library header loading

Browse Source
This commit is contained in:
Kendall Garner
2025-06-20 17:57:15 -07:00
parent b8ceb174b3
commit b7fb7c7f94
9 changed files with 59 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/artists/components/album-artist-detail-header.tsx
+4 -2
View File
@@ -12,11 +12,12 @@ import { formatDurationString } from '/@/renderer/utils';
import { LibraryItem, ServerType } from '/@/shared/types/domain-types';
interface AlbumArtistDetailHeaderProps {
background: string;
background?: string;
loading: boolean;
}
export const AlbumArtistDetailHeader = forwardRef(
({ background }: AlbumArtistDetailHeaderProps, ref: Ref<HTMLDivElement>) => {
({ background, loading }: AlbumArtistDetailHeaderProps, ref: Ref<HTMLDivElement>) => {
const { albumArtistId, artistId } = useParams() as {
albumArtistId?: string;
artistId?: string;
@@ -76,6 +77,7 @@ export const AlbumArtistDetailHeader = forwardRef(
background={background}
imageUrl={detailQuery?.data?.imageUrl}
item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
loading={loading}
ref={ref}
title={detailQuery?.data?.name || ''}
>
src/renderer/features/artists/routes/album-artist-detail-route.tsx
+3 -6
View File
@@ -1,7 +1,7 @@
import { useRef } from 'react';
import { useParams } from 'react-router';
import { NativeScrollArea, Spinner } from '/@/renderer/components';
import { NativeScrollArea } from '/@/renderer/components';
import { AlbumArtistDetailContent } from '/@/renderer/features/artists/components/album-artist-detail-content';
import { AlbumArtistDetailHeader } from '/@/renderer/features/artists/components/album-artist-detail-header';
import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
@@ -30,7 +30,7 @@ const AlbumArtistDetailRoute = () => {
query: { id: routeId },
serverId: server?.id,
});
const { color: background, colorId } = useFastAverageColor({
const { background, colorId } = useFastAverageColor({
id: routeId,
src: detailQuery.data?.imageUrl,
srcLoaded: !detailQuery.isLoading,
@@ -46,10 +46,6 @@ const AlbumArtistDetailRoute = () => {
});
};
if (!background || colorId !== routeId) {
return <Spinner container />;
}
return (
<AnimatedPage key={`album-artist-detail-${routeId}`}>
<NativeScrollArea
@@ -70,6 +66,7 @@ const AlbumArtistDetailRoute = () => {
>
<AlbumArtistDetailHeader
background={background}
loading={!background || colorId !== routeId}
ref={headerRef}
/>
<AlbumArtistDetailContent background={background} />