antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 10:03:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Prevent wrong initial color on navigation on the same route

Browse source
This commit is contained in:
jeffvli 2023-07-21 18:51:37 -07:00
parent 48eaddbeda
commit 853770ea8e
7 changed files with 62 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/renderer/features/artists/routes/album-artist-detail-route.tsx
View file

@ -1,4 +1,4 @@
import { NativeScrollArea } from '/@/renderer/components';
import { NativeScrollArea, Spinner } from '/@/renderer/components';
import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
import { useRef } from 'react';
import { useParams } from 'react-router';
@ -23,7 +23,11 @@ const AlbumArtistDetailRoute = () => {
query: { id: albumArtistId },
serverId: server?.id,
});
const background = useFastAverageColor(detailQuery.data?.imageUrl, !detailQuery.isLoading);
const { color, colorId } = useFastAverageColor({
id: albumArtistId,
src: detailQuery.data?.imageUrl,
srcLoaded: !detailQuery.isLoading,
});
const handlePlay = () => {
handlePlayQueueAdd?.({
@ -35,14 +39,16 @@ const AlbumArtistDetailRoute = () => {
});
};
if (detailQuery.isLoading || !background) return null;
if (detailQuery.isLoading || !color || colorId !== albumArtistId) {
return <Spinner container />;
}
return (
<AnimatedPage key={`album-artist-detail-${albumArtistId}`}>
<NativeScrollArea
ref={scrollAreaRef}
pageHeaderProps={{
backgroundColor: background,
backgroundColor: color,
children: (
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={handlePlay} />
@ -57,9 +63,9 @@ const AlbumArtistDetailRoute = () => {
>
<AlbumArtistDetailHeader
ref={headerRef}
background={background}
background={color}
/>
<AlbumArtistDetailContent background={background} />
<AlbumArtistDetailContent background={color} />
</NativeScrollArea>
</AnimatedPage>
);