Prevent wrong initial color on navigation on the same route

src/renderer/features/albums/routes/album-detail-route.tsx

@@ -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 type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
@@ -20,7 +20,11 @@ const AlbumDetailRoute = () => {
     const { albumId } = useParams() as { albumId: string };
     const server = useCurrentServer();
     const detailQuery = useAlbumDetail({ query: { id: albumId }, serverId: server?.id });
-    const background = useFastAverageColor(detailQuery.data?.imageUrl, !detailQuery.isLoading);
+    const { color: background, colorId } = useFastAverageColor({
+        id: albumId,
+        src: detailQuery.data?.imageUrl,
+        srcLoaded: !detailQuery.isLoading,
+    });
     const handlePlayQueueAdd = usePlayQueueAdd();
     const playButtonBehavior = usePlayButtonBehavior();
 
@@ -34,7 +38,9 @@ const AlbumDetailRoute = () => {
         });
     };
 
-    if (!background) return null;
+    if (!background || colorId !== albumId) {
+        return <Spinner container />;
+    }
 
     return (
         <AnimatedPage key={`album-detail-${albumId}`}>

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

@@ -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>
     );

src/renderer/features/player/components/full-screen-player-image.tsx

@@ -122,7 +122,11 @@ export const FullScreenPlayerImage = () => {
     const { queue } = usePlayerData();
     const useImageAspectRatio = useFullScreenPlayerStore((state) => state.useImageAspectRatio);
     const currentSong = queue.current;
-    const background = useFastAverageColor(queue.current?.imageUrl, true, 'dominant');
+    const { color: background } = useFastAverageColor({
+        algorithm: 'dominant',
+        src: queue.current?.imageUrl,
+        srcLoaded: true,
+    });
     const imageKey = `image-${background}`;
 
     const [imageState, setImageState] = useSetState({

src/renderer/features/player/components/full-screen-player.tsx

@@ -193,7 +193,11 @@ export const FullScreenPlayer = () => {
     }, [location, setStore]);
 
     const currentSong = useCurrentSong();
-    const background = useFastAverageColor(currentSong?.imageUrl, true, 'dominant');
+    const { color: background } = useFastAverageColor({
+        algorithm: 'dominant',
+        src: currentSong?.imageUrl,
+        srcLoaded: true,
+    });
 
     return (
         <Container

src/renderer/features/playlists/components/playlist-detail-content.tsx

@@ -1,19 +1,16 @@
-import { MutableRefObject, useMemo, useRef } from 'react';
 import { ColDef, RowDoubleClickedEvent } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { Box, Group } from '@mantine/core';
 import { closeAllModals, openModal } from '@mantine/modals';
+import { MutableRefObject, useMemo, useRef } from 'react';
 import { RiMoreFill } from 'react-icons/ri';
 import { generatePath, useNavigate, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+import { useListStoreByKey } from '../../../store/list.store';
 import { LibraryItem, QueueSong } from '/@/renderer/api/types';
 import { Button, ConfirmModal, DropdownMenu, MotionGroup, toast } from '/@/renderer/components';
-import {
+import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table';
-    getColumnDefs,
-    useFixedTableHeader,
-    VirtualTable,
-} from '/@/renderer/components/virtual-table';
 import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles';
 import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
 import {
@@ -30,7 +27,6 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { Play } from '/@/renderer/types';
-import { useListStoreByKey } from '../../../store/list.store';
 
 const ContentContainer = styled.div`
     position: relative;
@@ -97,8 +93,6 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
         [playlistSongsQueryInfinite.data?.pages],
     );
 
-    const { intersectRef, tableContainerRef } = useFixedTableHeader();
-
     const deletePlaylistMutation = useDeletePlaylist({});
 
     const handleDeletePlaylist = () => {
@@ -166,7 +160,6 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
     return (
         <ContentContainer>
             <Group
-                ref={intersectRef}
                 p="1rem"
                 position="apart"
             >
@@ -217,12 +210,13 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
                     </Button>
                 </Group>
             </Group>
-            <Box ref={tableContainerRef}>
+            <Box>
                 <VirtualTable
                     ref={tableRef}
                     autoFitColumns
                     autoHeight
                     deselectOnClickOutside
+                    stickyHeader
                     suppressCellFocus
                     suppressHorizontalScroll
                     suppressLoadingOverlay

src/renderer/features/playlists/routes/playlist-detail-route.tsx

@@ -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(
+    const { color: background, colorId } = useFastAverageColor({
-        detailQuery?.data?.imageUrl,
+        algorithm: 'sqrt',
-        !detailQuery?.isLoading,
+        id: playlistId,
-        'sqrt',
+        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,
                 }}
             >

src/renderer/hooks/use-fast-average-color.tsx

@@ -1,11 +1,15 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FastAverageColor } from 'fast-average-color';
 
-export const useFastAverageColor = (
+export const useFastAverageColor = (args: {
-    src?: string | null,
+    algorithm?: 'dominant' | 'simple' | 'sqrt';
-    srcLoaded?: boolean,
+    id?: string;
-    aglorithm?: 'dominant' | 'simple' | 'sqrt',
+    src?: string | null;
-) => {
+    srcLoaded?: boolean;
+}) => {
+    const { algorithm, src, srcLoaded, id } = args;
+    const idRef = useRef<string | undefined>(id);
+
     const [color, setColor] = useState<string | undefined>(undefined);
 
     useEffect(() => {
@@ -13,7 +17,7 @@ export const useFastAverageColor = (
 
         if (src && srcLoaded) {
             fac.getColorAsync(src, {
-                algorithm: aglorithm || 'dominant',
+                algorithm: algorithm || 'dominant',
                 ignoredColor: [
                     [255, 255, 255, 255, 90], // White
                     [0, 0, 0, 255, 30], // Black
@@ -22,10 +26,12 @@ export const useFastAverageColor = (
                 mode: 'precision',
             })
                 .then((color) => {
+                    idRef.current = id;
                     return setColor(color.rgb);
                 })
                 .catch((e) => {
                     console.log('Error fetching average color', e);
+                    idRef.current = id;
                     return setColor('rgba(0, 0, 0, 0)');
                 });
         } else if (srcLoaded) {
@@ -35,7 +41,7 @@ export const useFastAverageColor = (
         return () => {
             fac.destroy();
         };
-    }, [aglorithm, srcLoaded, src]);
+    }, [algorithm, srcLoaded, src, id]);
 
-    return color;
+    return { color, colorId: idRef.current };
 };