antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 18:33: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/playlists/routes/playlist-detail-route.tsx
View file

@ -2,7 +2,7 @@ import { useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useParams } from 'react-router';
import { LibraryItem } from '/@/renderer/api/types';
import { NativeScrollArea } from '/@/renderer/components';
import { NativeScrollArea, Spinner } from '/@/renderer/components';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { PlaylistDetailContent } from '/@/renderer/features/playlists/components/playlist-detail-content';
import { PlaylistDetailHeader } from '/@/renderer/features/playlists/components/playlist-detail-header';
@ -20,11 +20,12 @@ const PlaylistDetailRoute = () => {
const server = useCurrentServer();
const detailQuery = usePlaylistDetail({ query: { id: playlistId }, serverId: server?.id });
const background = useFastAverageColor(
detailQuery?.data?.imageUrl,
!detailQuery?.isLoading,
'sqrt',
);
const { color: background, colorId } = useFastAverageColor({
algorithm: 'sqrt',
id: playlistId,
src: detailQuery?.data?.imageUrl,
srcLoaded: !detailQuery?.isLoading,
});
const handlePlayQueueAdd = usePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior();
@ -39,7 +40,9 @@ const PlaylistDetailRoute = () => {
});
};
if (!background) return null;
if (!background || colorId !== playlistId) {
return <Spinner container />;
}
return (
<AnimatedPage key={`playlist-detail-${playlistId}`}>
@ -55,6 +58,7 @@ const PlaylistDetailRoute = () => {
</LibraryHeaderBar.Title>
</LibraryHeaderBar>
),
offset: 200,
target: headerRef,
}}
>