large performance refactor

src/renderer/app.tsx

@@ -10,7 +10,6 @@ import isElectron from 'is-electron';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 import i18n from '/@/i18n/i18n';
-import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
 import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
 import { useServerVersion } from '/@/renderer/hooks/use-server-version';
 import { IsUpdatedDialog } from '/@/renderer/is-updated-dialog';
@@ -32,7 +31,6 @@ export const App = () => {
     const { content, enabled } = useCssSettings();
     const { bindings } = useHotkeySettings();
     const cssRef = useRef<HTMLStyleElement | null>(null);
-    useDiscordRpc();
     useServerVersion();
 
     const [webAudio, setWebAudio] = useState<WebAudio>();

src/renderer/components/grid-carousel/grid-carousel-v2.tsx

@@ -42,7 +42,7 @@ const pageVariants: Variants = {
     initial: (custom: { isNext: boolean }) => ({ opacity: 0, x: custom.isNext ? 100 : -100 }),
 };
 
-export function GridCarousel(props: GridCarouselProps) {
+function BaseGridCarousel(props: GridCarouselProps) {
     const { cards, hasNextPage, loadNextPage, onNextPage, onPrevPage, rowCount = 1, title } = props;
     const { ref, ...cq } = useContainerQuery({
         '2xl': 1024,
@@ -192,6 +192,10 @@ export function GridCarousel(props: GridCarouselProps) {
     );
 }
 
+export const GridCarousel = memo(BaseGridCarousel);
+
+GridCarousel.displayName = 'GridCarousel';
+
 function getCardsToShow(breakpoints: {
     isLargerThan2xl: boolean;
     isLargerThan3xl: boolean;

src/renderer/components/item-list/helpers/item-list-infinite-loader.ts

@@ -50,9 +50,21 @@ function getInitialData(itemCount: number) {
     };
 }
 
+export const infiniteLoaderDataQueryKey = (
+    serverId: string,
+    itemType: LibraryItem,
+    query?: Record<string, any>,
+) => {
+    if (query) {
+        return [serverId, 'item-list-infinite-loader', itemType, query];
+    }
+
+    return [serverId, 'item-list-infinite-loader', itemType];
+};
+
 export const useItemListInfiniteLoader = ({
     eventKey,
-    fetchThreshold = 0.2,
+    fetchThreshold = 0.5,
     itemsPerPage = 100,
     itemType,
     listCountQuery,

src/renderer/components/item-list/item-grid-list/item-grid-list.tsx

@@ -266,7 +266,7 @@ export interface ItemGridListProps {
     rows?: ItemCardProps['rows'];
 }
 
-export const ItemGridList = ({
+const BaseItemGridList = ({
     data,
     enableDrag = true,
     enableExpansion = false,
@@ -750,3 +750,7 @@ const ListComponent = memo((props: ListChildComponentProps<GridItemProps>) => {
         </div>
     );
 });
+
+export const ItemGridList = memo(BaseItemGridList);
+
+ItemGridList.displayName = 'ItemGridList';

src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { memo } from 'react';
 
 import styles from './row-index-column.module.css';
 
@@ -88,6 +89,8 @@ const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
         !!props.activeRowId &&
         (props.activeRowId === song?.id || props.activeRowId === song?._uniqueId);
 
+    const isActiveAndPlaying = isActive && status === PlayerStatus.PLAYING;
+
     let adjustedRowIndex =
         props.adjustedRowIndexMap?.get(props.rowIndex) ??
         (props.enableHeader ? props.rowIndex : props.rowIndex + 1);
@@ -97,20 +100,39 @@ const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
     }
 
     return (
-        <TableColumnTextContainer {...props}>
+        <InnerQueueSongRowIndexColumn
-            {isActive ? (
+            {...props}
-                status === PlayerStatus.PLAYING ? (
+            adjustedRowIndex={adjustedRowIndex}
-                    <Flex>
+            isActive={isActive}
-                        <Icon fill="primary" icon="mediaPlay" />
+            isPlaying={isActiveAndPlaying}
-                    </Flex>
+        />
-                ) : (
-                    <Flex>
-                        <Icon fill="primary" icon="mediaPause" />
-                    </Flex>
-                )
-            ) : (
-                adjustedRowIndex
-            )}
-        </TableColumnTextContainer>
     );
 };
+
+const InnerQueueSongRowIndexColumn = memo(
+    (
+        props: ItemTableListInnerColumn & {
+            adjustedRowIndex: number;
+            isActive: boolean;
+            isPlaying: boolean;
+        },
+    ) => {
+        return (
+            <TableColumnTextContainer {...props}>
+                {props.isActive ? (
+                    props.isPlaying ? (
+                        <Flex>
+                            <Icon fill="primary" icon="mediaPlay" />
+                        </Flex>
+                    ) : (
+                        <Flex>
+                            <Icon fill="primary" icon="mediaPause" />
+                        </Flex>
+                    )
+                ) : (
+                    props.adjustedRowIndex
+                )}
+            </TableColumnTextContainer>
+        );
+    },
+);

src/renderer/components/item-list/item-table-list/item-table-list.tsx

@@ -6,6 +6,7 @@ import { AnimatePresence, motion } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import React, {
     type JSXElementConstructor,
+    memo,
     ReactElement,
     Ref,
     useCallback,
@@ -704,7 +705,7 @@ interface ItemTableListProps {
     startRowIndex?: number;
 }
 
-export const ItemTableList = ({
+const BaseItemTableList = ({
     activeRowId,
     autoFitColumns = false,
     CellComponent,
@@ -2178,3 +2179,7 @@ export const ItemTableList = ({
         </motion.div>
     );
 };
+
+export const ItemTableList = memo(BaseItemTableList);
+
+ItemTableList.displayName = 'ItemTableList';

src/renderer/components/native-scroll-area/native-scroll-area.tsx

@@ -1,5 +1,5 @@
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
-import { CSSProperties, forwardRef, ReactNode, Ref, useEffect, useRef } from 'react';
+import { CSSProperties, forwardRef, memo, ReactNode, Ref, useEffect, useRef } from 'react';
 
 import styles from './native-scroll-area.module.css';
 
@@ -18,7 +18,7 @@ interface NativeScrollAreaProps {
     style?: CSSProperties;
 }
 
-export const NativeScrollArea = forwardRef(
+const BaseNativeScrollArea = forwardRef(
     (
         { children, noHeader, pageHeaderProps, scrollHideDelay, ...props }: NativeScrollAreaProps,
         ref: Ref<HTMLDivElement>,
@@ -98,3 +98,7 @@ export const NativeScrollArea = forwardRef(
         );
     },
 );
+
+export const NativeScrollArea = memo(BaseNativeScrollArea);
+
+NativeScrollArea.displayName = 'NativeScrollArea';

src/renderer/components/page-header/page-header.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useInView } from 'motion/react';
 import { AnimatePresence, motion, Variants } from 'motion/react';
-import { CSSProperties, ReactNode, RefObject, useEffect, useRef } from 'react';
+import { CSSProperties, memo, ReactNode, RefObject, useEffect, useRef } from 'react';
 
 import styles from './page-header.module.css';
 
@@ -35,7 +35,7 @@ const variants: Variants = {
     initial: { opacity: 0 },
 };
 
-export const PageHeader = ({
+const BasePageHeader = ({
     animated,
     backgroundColor,
     children,
@@ -144,3 +144,7 @@ export const PageHeader = ({
         </>
     );
 };
+
+export const PageHeader = memo(BasePageHeader);
+
+PageHeader.displayName = 'PageHeader';

src/renderer/features/discord-rpc/use-discord-rpc.ts

@@ -10,6 +10,7 @@ import {
     useDiscordSettings,
     useGeneralSettings,
     usePlayerStore,
+    useTimestampStoreBase,
 } from '/@/renderer/store';
 import { sentenceCase } from '/@/renderer/utils';
 import { QueueSong, ServerType } from '/@/shared/types/domain-types';
@@ -26,7 +27,7 @@ const truncate = (field: string) =>
 export const useDiscordRpc = () => {
     const discordSettings = useDiscordSettings();
     const generalSettings = useGeneralSettings();
-    const { privateMode } = useAppStore();
+    const privateMode = useAppStore((state) => state.privateMode);
     const [lastUniqueId, setlastUniqueId] = useState('');
 
     const setActivity = useCallback(
@@ -201,14 +202,13 @@ export const useDiscordRpc = () => {
         if (!discordSettings.enabled || privateMode) {
             return;
         }
-        const unsubSongChange = usePlayerStore.subscribe(
+        const unsubSongChange = usePlayerStore.subscribe((state): ActivityState => {
-            (state): ActivityState => [
+            const currentSong = state.getCurrentSong();
-                state.current.song,
+            const currentTime = useTimestampStoreBase.getState().timestamp;
-                state.current.time,
+            const status = state.player.status;
-                state.current.status,
+
-            ],
+            return [currentSong, currentTime, status];
-            setActivity,
+        }, setActivity);
-        );
         return () => {
             unsubSongChange();
         };

src/renderer/features/player/audio-player/hooks/use-player-events.ts

@@ -140,6 +140,12 @@ function createPlayerEvents(callbacks: PlayerEventsCallbacks): PlayerEvents {
     return {
         cleanup: () => {
             unsubscribers.forEach((unsubscribe) => unsubscribe());
+            if (callbacks.onUserRating) {
+                eventEmitter.off('USER_RATING', callbacks.onUserRating);
+            }
+            if (callbacks.onUserFavorite) {
+                eventEmitter.off('USER_FAVORITE', callbacks.onUserFavorite);
+            }
         },
     };
 }

src/renderer/features/player/components/audio-players.tsx

@@ -2,8 +2,10 @@ import { useEffect } from 'react';
 
 import { eventEmitter } from '/@/renderer/events/event-emitter';
 import { UserFavoriteEventPayload, UserRatingEventPayload } from '/@/renderer/events/events';
+import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
 import { MpvPlayer } from '/@/renderer/features/player/audio-player/mpv-player';
 import { WebPlayer } from '/@/renderer/features/player/audio-player/web-player';
+import { usePowerSaveBlocker } from '/@/renderer/features/player/hooks/use-power-save-blocker';
 import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
 import {
     updateQueueFavorites,
@@ -19,6 +21,8 @@ export const AudioPlayers = () => {
     const serverId = useCurrentServerId();
 
     useScrobble();
+    usePowerSaveBlocker();
+    useDiscordRpc();
 
     // Listen to favorite and rating events to update queue songs
     useEffect(() => {

src/renderer/features/player/components/center-controls.tsx

@@ -18,167 +18,233 @@ import { Icon } from '/@/shared/components/icon/icon';
 import { PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/shared/types/types';
 
 export const CenterControls = () => {
-    const { t } = useTranslation();
-    const queryClient = useQueryClient();
-    const currentSong = usePlayerSong();
     const skip = useSettingsStore((state) => state.general.skipButtons);
-    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
-    const status = usePlayerStatus();
-    const repeat = usePlayerRepeat();
-    const shuffle = usePlayerShuffle();
-
-    const {
-        mediaNext,
-        mediaPrevious,
-        mediaSkipBackward,
-        mediaSkipForward,
-        mediaStop,
-        mediaTogglePlayPause,
-        toggleRepeat,
-        toggleShuffle,
-    } = usePlayer();
 
     return (
         <>
             <div className={styles.controlsContainer}>
                 <div className={styles.buttonsContainer}>
-                    <PlayerButton
+                    <StopButton />
-                        icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}
+                    <ShuffleButton />
-                        onClick={mediaStop}
+                    <PreviousButton />
-                        tooltip={{
+                    {skip?.enabled && <SkipBackwardButton />}
-                            label: t('player.stop', { postProcess: 'sentenceCase' }),
+                    <CenterPlayButton />
-                            openDelay: 0,
+                    {skip?.enabled && <SkipForwardButton />}
-                        }}
+                    <NextButton />
-                        variant="tertiary"
+                    <RepeatButton />
-                    />
+                    <ShuffleAllButton />
-                    <PlayerButton
-                        icon={
-                            <Icon
-                                fill={shuffle === PlayerShuffle.NONE ? 'default' : 'primary'}
-                                icon="mediaShuffle"
-                                size={buttonSize}
-                            />
-                        }
-                        isActive={shuffle !== PlayerShuffle.NONE}
-                        onClick={toggleShuffle}
-                        tooltip={{
-                            label:
-                                shuffle === PlayerShuffle.NONE
-                                    ? t('player.shuffle', {
-                                          context: 'off',
-                                          postProcess: 'sentenceCase',
-                                      })
-                                    : t('player.shuffle', { postProcess: 'sentenceCase' }),
-                            openDelay: 0,
-                        }}
-                        variant="tertiary"
-                    />
-                    <PlayerButton
-                        icon={<Icon fill="default" icon="mediaPrevious" size={buttonSize} />}
-                        onClick={mediaPrevious}
-                        tooltip={{
-                            label: t('player.previous', { postProcess: 'sentenceCase' }),
-                            openDelay: 0,
-                        }}
-                        variant="secondary"
-                    />
-                    {skip?.enabled && (
-                        <PlayerButton
-                            icon={
-                                <Icon fill="default" icon="mediaStepBackward" size={buttonSize} />
-                            }
-                            onClick={mediaSkipBackward}
-                            tooltip={{
-                                label: t('player.skip', {
-                                    context: 'back',
-                                    postProcess: 'sentenceCase',
-                                }),
-
-                                openDelay: 0,
-                            }}
-                            variant="secondary"
-                        />
-                    )}
-                    <PlayButton
-                        disabled={currentSong?.id === undefined}
-                        isPaused={status === PlayerStatus.PAUSED}
-                        onClick={mediaTogglePlayPause}
-                    />
-                    {skip?.enabled && (
-                        <PlayerButton
-                            icon={<Icon fill="default" icon="mediaStepForward" size={buttonSize} />}
-                            onClick={mediaSkipForward}
-                            tooltip={{
-                                label: t('player.skip', {
-                                    context: 'forward',
-                                    postProcess: 'sentenceCase',
-                                }),
-
-                                openDelay: 0,
-                            }}
-                            variant="secondary"
-                        />
-                    )}
-                    <PlayerButton
-                        icon={<Icon fill="default" icon="mediaNext" size={buttonSize} />}
-                        onClick={mediaNext}
-                        tooltip={{
-                            label: t('player.next', { postProcess: 'sentenceCase' }),
-                            openDelay: 0,
-                        }}
-                        variant="secondary"
-                    />
-                    <PlayerButton
-                        icon={
-                            repeat === PlayerRepeat.ONE ? (
-                                <Icon fill="primary" icon="mediaRepeatOne" size={buttonSize} />
-                            ) : (
-                                <Icon
-                                    fill={repeat === PlayerRepeat.NONE ? 'default' : 'primary'}
-                                    icon="mediaRepeat"
-                                    size={buttonSize}
-                                />
-                            )
-                        }
-                        isActive={repeat !== PlayerRepeat.NONE}
-                        onClick={toggleRepeat}
-                        tooltip={{
-                            label: `${
-                                repeat === PlayerRepeat.NONE
-                                    ? t('player.repeat', {
-                                          context: 'off',
-                                          postProcess: 'sentenceCase',
-                                      })
-                                    : repeat === PlayerRepeat.ALL
-                                      ? t('player.repeat', {
-                                            context: 'all',
-                                            postProcess: 'sentenceCase',
-                                        })
-                                      : t('player.repeat', {
-                                            context: 'one',
-                                            postProcess: 'sentenceCase',
-                                        })
-                            }`,
-                            openDelay: 0,
-                        }}
-                        variant="tertiary"
-                    />
-                    <PlayerButton
-                        icon={<Icon fill="default" icon="mediaRandom" size={buttonSize} />}
-                        onClick={() =>
-                            openShuffleAllModal({
-                                queryClient,
-                            })
-                        }
-                        tooltip={{
-                            label: t('player.playRandom', { postProcess: 'sentenceCase' }),
-                            openDelay: 0,
-                        }}
-                        variant="tertiary"
-                    />
                 </div>
             </div>
             <PlayerbarSlider />
         </>
     );
 };
+
+const StopButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const { mediaStop } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}
+            onClick={mediaStop}
+            tooltip={{
+                label: t('player.stop', { postProcess: 'sentenceCase' }),
+                openDelay: 0,
+            }}
+            variant="tertiary"
+        />
+    );
+};
+
+const ShuffleButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const shuffle = usePlayerShuffle();
+    const { toggleShuffle } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={
+                <Icon
+                    fill={shuffle === PlayerShuffle.NONE ? 'default' : 'primary'}
+                    icon="mediaShuffle"
+                    size={buttonSize}
+                />
+            }
+            isActive={shuffle !== PlayerShuffle.NONE}
+            onClick={toggleShuffle}
+            tooltip={{
+                label:
+                    shuffle === PlayerShuffle.NONE
+                        ? t('player.shuffle', {
+                              context: 'off',
+                              postProcess: 'sentenceCase',
+                          })
+                        : t('player.shuffle', { postProcess: 'sentenceCase' }),
+                openDelay: 0,
+            }}
+            variant="tertiary"
+        />
+    );
+};
+
+const PreviousButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const { mediaPrevious } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={<Icon fill="default" icon="mediaPrevious" size={buttonSize} />}
+            onClick={mediaPrevious}
+            tooltip={{
+                label: t('player.previous', { postProcess: 'sentenceCase' }),
+                openDelay: 0,
+            }}
+            variant="secondary"
+        />
+    );
+};
+
+const SkipBackwardButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const { mediaSkipBackward } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={<Icon fill="default" icon="mediaStepBackward" size={buttonSize} />}
+            onClick={mediaSkipBackward}
+            tooltip={{
+                label: t('player.skip', {
+                    context: 'back',
+                    postProcess: 'sentenceCase',
+                }),
+                openDelay: 0,
+            }}
+            variant="secondary"
+        />
+    );
+};
+
+const CenterPlayButton = () => {
+    const currentSong = usePlayerSong();
+    const status = usePlayerStatus();
+    const { mediaTogglePlayPause } = usePlayer();
+
+    return (
+        <PlayButton
+            disabled={currentSong?.id === undefined}
+            isPaused={status === PlayerStatus.PAUSED}
+            onClick={mediaTogglePlayPause}
+        />
+    );
+};
+
+const SkipForwardButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const { mediaSkipForward } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={<Icon fill="default" icon="mediaStepForward" size={buttonSize} />}
+            onClick={mediaSkipForward}
+            tooltip={{
+                label: t('player.skip', {
+                    context: 'forward',
+                    postProcess: 'sentenceCase',
+                }),
+                openDelay: 0,
+            }}
+            variant="secondary"
+        />
+    );
+};
+
+const NextButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const { mediaNext } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={<Icon fill="default" icon="mediaNext" size={buttonSize} />}
+            onClick={mediaNext}
+            tooltip={{
+                label: t('player.next', { postProcess: 'sentenceCase' }),
+                openDelay: 0,
+            }}
+            variant="secondary"
+        />
+    );
+};
+
+const RepeatButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const repeat = usePlayerRepeat();
+    const { toggleRepeat } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={
+                repeat === PlayerRepeat.ONE ? (
+                    <Icon fill="primary" icon="mediaRepeatOne" size={buttonSize} />
+                ) : (
+                    <Icon
+                        fill={repeat === PlayerRepeat.NONE ? 'default' : 'primary'}
+                        icon="mediaRepeat"
+                        size={buttonSize}
+                    />
+                )
+            }
+            isActive={repeat !== PlayerRepeat.NONE}
+            onClick={toggleRepeat}
+            tooltip={{
+                label: `${
+                    repeat === PlayerRepeat.NONE
+                        ? t('player.repeat', {
+                              context: 'off',
+                              postProcess: 'sentenceCase',
+                          })
+                        : repeat === PlayerRepeat.ALL
+                          ? t('player.repeat', {
+                                context: 'all',
+                                postProcess: 'sentenceCase',
+                            })
+                          : t('player.repeat', {
+                                context: 'one',
+                                postProcess: 'sentenceCase',
+                            })
+                }`,
+                openDelay: 0,
+            }}
+            variant="tertiary"
+        />
+    );
+};
+
+const ShuffleAllButton = () => {
+    const { t } = useTranslation();
+    const queryClient = useQueryClient();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+
+    return (
+        <PlayerButton
+            icon={<Icon fill="default" icon="mediaRandom" size={buttonSize} />}
+            onClick={() =>
+                openShuffleAllModal({
+                    queryClient,
+                })
+            }
+            tooltip={{
+                label: t('player.playRandom', { postProcess: 'sentenceCase' }),
+                openDelay: 0,
+            }}
+            variant="tertiary"
+        />
+    );
+};

src/renderer/features/player/components/left-controls.tsx

@@ -3,18 +3,19 @@ import { AnimatePresence, LayoutGroup, motion } from 'motion/react';
 import React, { MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, Link } from 'react-router';
+import { shallow } from 'zustand/shallow';
 
 import styles from './left-controls.module.css';
 
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
+    useAppStore,
     useAppStoreActions,
     useFullScreenPlayerStore,
     useHotkeySettings,
     usePlayerSong,
     useSetFullScreenPlayerStore,
-    useSidebarStore,
 } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Group } from '/@/shared/components/group/group';
@@ -31,7 +32,15 @@ export const LeftControls = () => {
     const { setSideBar } = useAppStoreActions();
     const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
     const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
-    const { collapsed, image } = useSidebarStore();
+
+    const { collapsed, image } = useAppStore(
+        (state) => ({
+            collapsed: state.sidebar.collapsed,
+            image: state.sidebar.image,
+        }),
+        shallow,
+    );
+
     const hideImage = image && !collapsed;
     const currentSong = usePlayerSong();
     const title = currentSong?.name;

src/renderer/features/player/components/playerbar-slider.tsx

@@ -27,7 +27,7 @@ export const PlayerbarSlider = () => {
     const formattedTimeRemaining = formatDuration((currentTime - songDuration) * 1000 || 0);
     const formattedTime = formatDuration(currentTime * 1000 || 0);
 
-    const { showTimeRemaining } = useAppStore();
+    const showTimeRemaining = useAppStore((state) => state.showTimeRemaining);
     const { setShowTimeRemaining } = useAppStoreActions();
 
     useRemote();

src/renderer/features/player/components/playerbar.tsx

@@ -7,7 +7,6 @@ import { CenterControls } from '/@/renderer/features/player/components/center-co
 import { LeftControls } from '/@/renderer/features/player/components/left-controls';
 import { MobilePlayerbar } from '/@/renderer/features/player/components/mobile-playerbar';
 import { RightControls } from '/@/renderer/features/player/components/right-controls';
-import { usePowerSaveBlocker } from '/@/renderer/features/player/hooks/use-power-save-blocker';
 import { useIsMobile } from '/@/renderer/hooks/use-is-mobile';
 import { useFullScreenPlayerStore, useSetFullScreenPlayerStore } from '/@/renderer/store';
 import { useGeneralSettings } from '/@/renderer/store/settings.store';
@@ -19,8 +18,6 @@ export const Playerbar = () => {
     const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
     const isMobile = useIsMobile();
 
-    usePowerSaveBlocker();
-
     const handleToggleFullScreenPlayer = (e?: KeyboardEvent | MouseEvent<HTMLDivElement>) => {
         e?.stopPropagation();
         setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
@@ -46,22 +43,6 @@ export const Playerbar = () => {
                     <RightControls />
                 </div>
             </div>
-            {/* {playbackType === PlayerType.WEB && (
-                <AudioPlayer
-                    // autoNext={autoNextFn}
-                    crossfadeDuration={settings.crossfadeDuration}
-                    crossfadeStyle={settings.crossfadeStyle}
-                    currentPlayer={player}
-                    muted={muted}
-                    playbackStyle={settings.style}
-                    player1={player1}
-                    player2={player2}
-                    ref={playersRef}
-                    status={status}
-                    style={settings.style as any}
-                    volume={(volume / 100) ** 2}
-                />
-            )} */}
         </div>
     );
 };

src/renderer/features/player/components/right-controls.tsx

@@ -1,3 +1,4 @@
+import { t } from 'i18next';
 import { useCallback, WheelEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -14,9 +15,10 @@ import {
     useHotkeySettings,
     usePlayerData,
     usePlayerMuted,
+    usePlayerSong,
     usePlayerVolume,
     useSettingsStore,
-    useSidebarStore,
+    useSidebarRightExpanded,
 } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Flex } from '/@/shared/components/flex/flex';
@@ -51,19 +53,61 @@ const calculateVolumeDown = (volume: number, volumeWheelStep: number) => {
 };
 
 export const RightControls = () => {
+    return (
+        <Flex align="flex-end" direction="column" h="100%" px="1rem" py="0.5rem">
+            <Group h="calc(100% / 3)">
+                <RatingButton />
+            </Group>
+            <Group align="center" gap="xs" wrap="nowrap">
+                <PlayerConfig />
+                <FavoriteButton />
+                <QueueButton />
+                <VolumeButton />
+            </Group>
+            <Group h="calc(100% / 3)" />
+        </Flex>
+    );
+};
+
+const QueueButton = () => {
     const { t } = useTranslation();
-    const isMinWidth = useMediaQuery('(max-width: 480px)');
+    const isSidebarRightExpanded = useSidebarRightExpanded();
-    const volume = usePlayerVolume();
-    const muted = usePlayerMuted();
-    const server = useCurrentServer();
-    const { currentSong, previousSong } = usePlayerData();
     const { setSideBar } = useAppStoreActions();
-    const { rightExpanded: isQueueExpanded } = useSidebarStore();
+
     const { bindings } = useHotkeySettings();
-    const { volumeWheelStep } = useGeneralSettings();
+
-    const volumeWidth = useSettingsStore((state) => state.general.volumeWidth);
+    const handleToggleQueue = () => {
-    const { mediaToggleMute, setVolume } = usePlayer();
+        setSideBar({ rightExpanded: !isSidebarRightExpanded });
-    const updateRatingMutation = useSetRating({});
+    };
+
+    useHotkeys([
+        [bindings.toggleQueue.isGlobal ? '' : bindings.toggleQueue.hotkey, handleToggleQueue],
+    ]);
+
+    return (
+        <ActionIcon
+            icon={isSidebarRightExpanded ? 'panelRightClose' : 'panelRightOpen'}
+            iconProps={{
+                size: 'lg',
+            }}
+            onClick={(e) => {
+                e.stopPropagation();
+                handleToggleQueue();
+            }}
+            size="sm"
+            tooltip={{
+                label: t('player.viewQueue', { postProcess: 'titleCase' }),
+                openDelay: 0,
+            }}
+            variant="subtle"
+        />
+    );
+};
+
+const FavoriteButton = () => {
+    const currentSong = usePlayerSong();
+    const { bindings } = useHotkeySettings();
+
     const addToFavoritesMutation = useCreateFavorite({});
     const removeFromFavoritesMutation = useDeleteFavorite({});
 
@@ -79,19 +123,6 @@ export const RightControls = () => {
         });
     };
 
-    const handleUpdateRating = (rating: number) => {
-        if (!currentSong) return;
-
-        updateRatingMutation.mutate({
-            apiClientProps: { serverId: currentSong?._serverId || '' },
-            query: {
-                id: [currentSong.id],
-                rating,
-                type: LibraryItem.SONG,
-            },
-        });
-    };
-
     const handleRemoveFromFavorites = (song: QueueSong | undefined) => {
         if (!song?.id) return;
 
@@ -114,6 +145,136 @@ export const RightControls = () => {
         }
     };
 
+    useFavoritePreviousSongHotkeys({
+        handleAddToFavorites,
+        handleRemoveFromFavorites,
+        handleToggleFavorite,
+    });
+
+    useHotkeys([
+        [
+            bindings.favoriteCurrentAdd.isGlobal ? '' : bindings.favoriteCurrentAdd.hotkey,
+            () => handleAddToFavorites(currentSong),
+        ],
+        [
+            bindings.favoriteCurrentRemove.isGlobal ? '' : bindings.favoriteCurrentRemove.hotkey,
+            () => handleRemoveFromFavorites(currentSong),
+        ],
+        [
+            bindings.favoriteCurrentToggle.isGlobal ? '' : bindings.favoriteCurrentToggle.hotkey,
+            () => handleToggleFavorite(currentSong),
+        ],
+    ]);
+
+    return (
+        <ActionIcon
+            icon="favorite"
+            iconProps={{
+                fill: currentSong?.userFavorite ? 'primary' : undefined,
+                size: 'lg',
+            }}
+            onClick={(e) => {
+                e.stopPropagation();
+                handleToggleFavorite(currentSong);
+            }}
+            size="sm"
+            tooltip={{
+                label: currentSong?.userFavorite
+                    ? t('player.unfavorite', { postProcess: 'titleCase' })
+                    : t('player.favorite', { postProcess: 'titleCase' }),
+                openDelay: 0,
+            }}
+            variant="subtle"
+        />
+    );
+};
+
+const useFavoritePreviousSongHotkeys = ({
+    handleAddToFavorites,
+    handleRemoveFromFavorites,
+    handleToggleFavorite,
+}: {
+    handleAddToFavorites: (song: QueueSong | undefined) => void;
+    handleRemoveFromFavorites: (song: QueueSong | undefined) => void;
+    handleToggleFavorite: (song: QueueSong | undefined) => void;
+}) => {
+    const { bindings } = useHotkeySettings();
+    const { previousSong } = usePlayerData();
+
+    useHotkeys([
+        [
+            bindings.favoritePreviousAdd.isGlobal ? '' : bindings.favoritePreviousAdd.hotkey,
+            () => handleAddToFavorites(previousSong),
+        ],
+        [
+            bindings.favoritePreviousRemove.isGlobal ? '' : bindings.favoritePreviousRemove.hotkey,
+            () => handleRemoveFromFavorites(previousSong),
+        ],
+        [
+            bindings.favoritePreviousToggle.isGlobal ? '' : bindings.favoritePreviousToggle.hotkey,
+            () => handleToggleFavorite(previousSong),
+        ],
+    ]);
+
+    return null;
+};
+
+const RatingButton = () => {
+    const server = useCurrentServer();
+    const currentSong = usePlayerSong();
+    const updateRatingMutation = useSetRating({});
+
+    const isSongDefined = Boolean(currentSong?.id);
+    const showRating =
+        isSongDefined &&
+        (server?.type === ServerType.NAVIDROME || server?.type === ServerType.SUBSONIC);
+
+    const handleUpdateRating = (rating: number) => {
+        if (!currentSong) return;
+
+        updateRatingMutation.mutate({
+            apiClientProps: { serverId: currentSong?._serverId || '' },
+            query: {
+                id: [currentSong.id],
+                rating,
+                type: LibraryItem.SONG,
+            },
+        });
+    };
+
+    const { bindings } = useHotkeySettings();
+
+    useHotkeys([
+        [bindings.rate0.isGlobal ? '' : bindings.rate0.hotkey, () => handleUpdateRating(0)],
+        [bindings.rate1.isGlobal ? '' : bindings.rate1.hotkey, () => handleUpdateRating(1)],
+        [bindings.rate2.isGlobal ? '' : bindings.rate2.hotkey, () => handleUpdateRating(2)],
+        [bindings.rate3.isGlobal ? '' : bindings.rate3.hotkey, () => handleUpdateRating(3)],
+        [bindings.rate4.isGlobal ? '' : bindings.rate4.hotkey, () => handleUpdateRating(4)],
+        [bindings.rate5.isGlobal ? '' : bindings.rate5.hotkey, () => handleUpdateRating(5)],
+    ]);
+
+    return (
+        <>
+            {showRating && (
+                <Rating
+                    onChange={handleUpdateRating}
+                    size="xs"
+                    value={currentSong?.userRating || 0}
+                />
+            )}
+        </>
+    );
+};
+
+const VolumeButton = () => {
+    const { bindings } = useHotkeySettings();
+    const volume = usePlayerVolume();
+    const muted = usePlayerMuted();
+    const { volumeWheelStep } = useGeneralSettings();
+    const volumeWidth = useSettingsStore((state) => state.general.volumeWidth);
+    const { mediaToggleMute, setVolume } = usePlayer();
+    const isMinWidth = useMediaQuery('(max-width: 480px)');
+
     const handleVolumeDown = useCallback(() => {
         setVolume(volume - 1);
     }, [setVolume, volume]);
@@ -122,10 +283,6 @@ export const RightControls = () => {
         setVolume(volume + 1);
     }, [setVolume, volume]);
 
-    const handleMute = useCallback(() => {
-        mediaToggleMute();
-    }, [mediaToggleMute]);
-
     const handleVolumeSlider = useCallback(
         (e: number) => {
             setVolume(e);
@@ -133,6 +290,10 @@ export const RightControls = () => {
         [setVolume],
     );
 
+    const handleMute = useCallback(() => {
+        mediaToggleMute();
+    }, [mediaToggleMute]);
+
     const handleVolumeWheel = useCallback(
         (e: WheelEvent<HTMLButtonElement | HTMLDivElement>) => {
             let volumeToSet;
@@ -146,132 +307,43 @@ export const RightControls = () => {
         },
         [setVolume, volume, volumeWheelStep],
     );
-
-    const handleToggleQueue = () => {
-        setSideBar({ rightExpanded: !isQueueExpanded });
-    };
-
-    const isSongDefined = Boolean(currentSong?.id);
-    const showRating =
-        isSongDefined &&
-        (server?.type === ServerType.NAVIDROME || server?.type === ServerType.SUBSONIC);
-
     useHotkeys([
         [bindings.volumeDown.isGlobal ? '' : bindings.volumeDown.hotkey, handleVolumeDown],
         [bindings.volumeUp.isGlobal ? '' : bindings.volumeUp.hotkey, handleVolumeUp],
         [bindings.volumeMute.isGlobal ? '' : bindings.volumeMute.hotkey, handleMute],
-        [bindings.toggleQueue.isGlobal ? '' : bindings.toggleQueue.hotkey, handleToggleQueue],
-        [
-            bindings.favoriteCurrentAdd.isGlobal ? '' : bindings.favoriteCurrentAdd.hotkey,
-            () => handleAddToFavorites(currentSong),
-        ],
-        [
-            bindings.favoriteCurrentRemove.isGlobal ? '' : bindings.favoriteCurrentRemove.hotkey,
-            () => handleRemoveFromFavorites(currentSong),
-        ],
-        [
-            bindings.favoriteCurrentToggle.isGlobal ? '' : bindings.favoriteCurrentToggle.hotkey,
-            () => handleToggleFavorite(currentSong),
-        ],
-        [
-            bindings.favoritePreviousAdd.isGlobal ? '' : bindings.favoritePreviousAdd.hotkey,
-            () => handleAddToFavorites(previousSong),
-        ],
-        [
-            bindings.favoritePreviousRemove.isGlobal ? '' : bindings.favoritePreviousRemove.hotkey,
-            () => handleRemoveFromFavorites(previousSong),
-        ],
-        [
-            bindings.favoritePreviousToggle.isGlobal ? '' : bindings.favoritePreviousToggle.hotkey,
-            () => handleToggleFavorite(previousSong),
-        ],
-        [bindings.rate0.isGlobal ? '' : bindings.rate0.hotkey, () => handleUpdateRating(0)],
-        [bindings.rate1.isGlobal ? '' : bindings.rate1.hotkey, () => handleUpdateRating(1)],
-        [bindings.rate2.isGlobal ? '' : bindings.rate2.hotkey, () => handleUpdateRating(2)],
-        [bindings.rate3.isGlobal ? '' : bindings.rate3.hotkey, () => handleUpdateRating(3)],
-        [bindings.rate4.isGlobal ? '' : bindings.rate4.hotkey, () => handleUpdateRating(4)],
-        [bindings.rate5.isGlobal ? '' : bindings.rate5.hotkey, () => handleUpdateRating(5)],
     ]);
 
     return (
-        <Flex align="flex-end" direction="column" h="100%" px="1rem" py="0.5rem">
+        <>
-            <Group h="calc(100% / 3)">
+            <ActionIcon
-                {showRating && (
+                icon={muted ? 'volumeMute' : volume > 50 ? 'volumeMax' : 'volumeNormal'}
-                    <Rating
+                iconProps={{
-                        onChange={handleUpdateRating}
+                    color: muted ? 'muted' : undefined,
-                        size="xs"
+                    size: 'xl',
-                        value={currentSong?.userRating || 0}
+                }}
-                    />
+                onClick={(e) => {
-                )}
+                    e.stopPropagation();
-            </Group>
+                    handleMute();
-            <Group align="center" gap="xs" wrap="nowrap">
+                }}
-                <PlayerConfig />
+                onWheel={handleVolumeWheel}
-                <ActionIcon
+                size="sm"
-                    icon="favorite"
+                tooltip={{
-                    iconProps={{
+                    label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume,
-                        fill: currentSong?.userFavorite ? 'primary' : undefined,
+                    openDelay: 0,
-                        size: 'lg',
+                }}
-                    }}
+                variant="subtle"
-                    onClick={(e) => {
+            />
-                        e.stopPropagation();
+            {!isMinWidth ? (
-                        handleToggleFavorite(currentSong);
+                <CustomPlayerbarSlider
-                    }}
+                    max={100}
-                    size="sm"
+                    min={0}
-                    tooltip={{
+                    onChange={handleVolumeSlider}
-                        label: currentSong?.userFavorite
-                            ? t('player.unfavorite', { postProcess: 'titleCase' })
-                            : t('player.favorite', { postProcess: 'titleCase' }),
-                        openDelay: 0,
-                    }}
-                    variant="subtle"
-                />
-                <ActionIcon
-                    icon={isQueueExpanded ? 'panelRightClose' : 'panelRightOpen'}
-                    iconProps={{
-                        size: 'lg',
-                    }}
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        handleToggleQueue();
-                    }}
-                    size="sm"
-                    tooltip={{
-                        label: t('player.viewQueue', { postProcess: 'titleCase' }),
-                        openDelay: 0,
-                    }}
-                    variant="subtle"
-                />
-                <ActionIcon
-                    icon={muted ? 'volumeMute' : volume > 50 ? 'volumeMax' : 'volumeNormal'}
-                    iconProps={{
-                        color: muted ? 'muted' : undefined,
-                        size: 'xl',
-                    }}
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        handleMute();
-                    }}
                     onWheel={handleVolumeWheel}
-                    size="sm"
+                    size={6}
-                    tooltip={{
+                    value={volume}
-                        label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume,
+                    w={volumeWidth}
-                        openDelay: 0,
-                    }}
-                    variant="subtle"
                 />
-                {!isMinWidth ? (
+            ) : null}
-                    <CustomPlayerbarSlider
+        </>
-                        max={100}
-                        min={0}
-                        onChange={handleVolumeSlider}
-                        onWheel={handleVolumeWheel}
-                        size={6}
-                        value={volume}
-                        w={volumeWidth}
-                    />
-                ) : null}
-            </Group>
-            <Group h="calc(100% / 3)" />
-        </Flex>
     );
 };

src/renderer/features/player/hooks/use-scrobble.ts

@@ -60,7 +60,7 @@ const checkScrobbleConditions = (args: {
 export const useScrobble = () => {
     const scrobbleSettings = usePlaybackSettings().scrobble;
     const isScrobbleEnabled = scrobbleSettings?.enabled;
-    const isPrivateModeEnabled = useAppStore().privateMode;
+    const isPrivateModeEnabled = useAppStore((state) => state.privateMode);
     const sendScrobble = useSendScrobble();
 
     const [isCurrentSongScrobbled, setIsCurrentSongScrobbled] = useState(false);

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

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

src/renderer/features/shared/mutations/favorite-optimistic-updates.ts

@@ -1,6 +1,7 @@
 import { QueryClient } from '@tanstack/react-query';
 
 import { queryKeys } from '/@/renderer/api/query-keys';
+import { infiniteLoaderDataQueryKey } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
 import {
     Album,
     AlbumArtist,
@@ -8,7 +9,6 @@ import {
     AlbumArtistListResponse,
     AlbumDetailResponse,
     AlbumListResponse,
-    Artist,
     ArtistListResponse,
     FavoriteArgs,
     LibraryItem,
@@ -151,6 +151,52 @@ export const applyFavoriteOptimisticUpdates = (
                 });
             }
 
+            const infiniteLoaderQueryKey = infiniteLoaderDataQueryKey(
+                variables.apiClientProps.serverId,
+                LibraryItem.ALBUM,
+            );
+
+            const infiniteLoaderQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: infiniteLoaderQueryKey,
+            });
+
+            if (infiniteLoaderQueries.length) {
+                infiniteLoaderQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(
+                            queryKey,
+                            (
+                                prev:
+                                    | undefined
+                                    | {
+                                          data: unknown[];
+                                          pagesLoaded: Record<string, boolean>;
+                                      },
+                            ) => {
+                                if (prev && prev.data) {
+                                    return {
+                                        ...prev,
+                                        data: prev.data.map((item: any) => {
+                                            if (!item || !item.id) {
+                                                return item;
+                                            }
+
+                                            return itemIdSet.has(item.id)
+                                                ? { ...item, userFavorite: isFavorite }
+                                                : item;
+                                        }),
+                                    };
+                                }
+
+                                return prev;
+                            },
+                        );
+                    }
+                });
+            }
+
             break;
         }
         case LibraryItem.ALBUM_ARTIST: {
@@ -271,6 +317,52 @@ export const applyFavoriteOptimisticUpdates = (
                 });
             }
 
+            const infiniteLoaderQueryKey = infiniteLoaderDataQueryKey(
+                variables.apiClientProps.serverId,
+                LibraryItem.ALBUM_ARTIST,
+            );
+
+            const infiniteLoaderQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: infiniteLoaderQueryKey,
+            });
+
+            if (infiniteLoaderQueries.length) {
+                infiniteLoaderQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(
+                            queryKey,
+                            (
+                                prev:
+                                    | undefined
+                                    | {
+                                          data: unknown[];
+                                          pagesLoaded: Record<string, boolean>;
+                                      },
+                            ) => {
+                                if (prev && prev.data) {
+                                    return {
+                                        ...prev,
+                                        data: prev.data.map((item: any) => {
+                                            if (!item || !item.id) {
+                                                return item;
+                                            }
+
+                                            return itemIdSet.has(item.id)
+                                                ? { ...item, userFavorite: isFavorite }
+                                                : item;
+                                        }),
+                                    };
+                                }
+
+                                return prev;
+                            },
+                        );
+                    }
+                });
+            }
+
             break;
         }
         case LibraryItem.ARTIST: {
@@ -291,7 +383,7 @@ export const applyFavoriteOptimisticUpdates = (
                                 if (prev) {
                                     return {
                                         ...prev,
-                                        items: prev.items.map((item: Artist) => {
+                                        items: prev.items.map((item: AlbumArtist) => {
                                             return itemIdSet.has(item.id)
                                                 ? { ...item, userFavorite: isFavorite }
                                                 : item;
@@ -332,7 +424,7 @@ export const applyFavoriteOptimisticUpdates = (
                                         pages: prev.pages.map((page: ArtistListResponse) => {
                                             return {
                                                 ...page,
-                                                items: page.items.map((item: Artist) => {
+                                                items: page.items.map((item: AlbumArtist) => {
                                                     return itemIdSet.has(item.id)
                                                         ? { ...item, userFavorite: isFavorite }
                                                         : item;
@@ -349,6 +441,52 @@ export const applyFavoriteOptimisticUpdates = (
                 });
             }
 
+            const infiniteLoaderQueryKey = infiniteLoaderDataQueryKey(
+                variables.apiClientProps.serverId,
+                LibraryItem.ARTIST,
+            );
+
+            const infiniteLoaderQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: infiniteLoaderQueryKey,
+            });
+
+            if (infiniteLoaderQueries.length) {
+                infiniteLoaderQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(
+                            queryKey,
+                            (
+                                prev:
+                                    | undefined
+                                    | {
+                                          data: unknown[];
+                                          pagesLoaded: Record<string, boolean>;
+                                      },
+                            ) => {
+                                if (prev && prev.data) {
+                                    return {
+                                        ...prev,
+                                        data: prev.data.map((item: any) => {
+                                            if (!item || !item.id) {
+                                                return item;
+                                            }
+
+                                            return itemIdSet.has(item.id)
+                                                ? { ...item, userFavorite: isFavorite }
+                                                : item;
+                                        }),
+                                    };
+                                }
+
+                                return prev;
+                            },
+                        );
+                    }
+                });
+            }
+
             break;
         }
         case LibraryItem.PLAYLIST_SONG:

src/renderer/features/shared/mutations/rating-optimistic-updates.ts

@@ -10,7 +10,6 @@ import {
     AlbumArtistListResponse,
     AlbumDetailResponse,
     AlbumListResponse,
-    Artist,
     ArtistListResponse,
     LibraryItem,
     SetRatingArgs,
@@ -120,6 +119,54 @@ export const applyRatingOptimisticUpdates = (
                 });
             }
 
+            // Update infinite loader custom query keys
+            const infiniteLoaderQueryKey = [
+                variables.apiClientProps.serverId,
+                'item-list-infinite-loader',
+                LibraryItem.ALBUM,
+            ];
+
+            const infiniteLoaderQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: infiniteLoaderQueryKey,
+            });
+
+            if (infiniteLoaderQueries.length) {
+                infiniteLoaderQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(
+                            queryKey,
+                            (
+                                prev:
+                                    | undefined
+                                    | {
+                                          data: unknown[];
+                                          pagesLoaded: Record<string, boolean>;
+                                      },
+                            ) => {
+                                if (prev && prev.data) {
+                                    return {
+                                        ...prev,
+                                        data: prev.data.map((item: any) => {
+                                            if (!item || !item.id) {
+                                                return item;
+                                            }
+
+                                            return itemIdSet.has(item.id)
+                                                ? { ...item, userRating: rating }
+                                                : item;
+                                        }),
+                                    };
+                                }
+
+                                return prev;
+                            },
+                        );
+                    }
+                });
+            }
+
             break;
         }
         case LibraryItem.ALBUM_ARTIST: {
@@ -206,6 +253,54 @@ export const applyRatingOptimisticUpdates = (
                 });
             }
 
+            // Update infinite loader custom query keys
+            const infiniteLoaderQueryKey = [
+                variables.apiClientProps.serverId,
+                'item-list-infinite-loader',
+                LibraryItem.ALBUM_ARTIST,
+            ];
+
+            const infiniteLoaderQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: infiniteLoaderQueryKey,
+            });
+
+            if (infiniteLoaderQueries.length) {
+                infiniteLoaderQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(
+                            queryKey,
+                            (
+                                prev:
+                                    | undefined
+                                    | {
+                                          data: unknown[];
+                                          pagesLoaded: Record<string, boolean>;
+                                      },
+                            ) => {
+                                if (prev && prev.data) {
+                                    return {
+                                        ...prev,
+                                        data: prev.data.map((item: any) => {
+                                            if (!item || !item.id) {
+                                                return item;
+                                            }
+
+                                            return itemIdSet.has(item.id)
+                                                ? { ...item, userRating: rating }
+                                                : item;
+                                        }),
+                                    };
+                                }
+
+                                return prev;
+                            },
+                        );
+                    }
+                });
+            }
+
             break;
         }
         case LibraryItem.ARTIST: {
@@ -223,7 +318,7 @@ export const applyRatingOptimisticUpdates = (
                         queryClient.setQueryData(queryKey, (prev: ArtistListResponse) => {
                             return {
                                 ...prev,
-                                items: prev.items.map((item: Artist) => {
+                                items: prev.items.map((item: AlbumArtist) => {
                                     return itemIdSet.has(item.id)
                                         ? { ...item, userRating: rating }
                                         : item;
@@ -254,7 +349,7 @@ export const applyRatingOptimisticUpdates = (
                                     pages: prev.pages.map((page: ArtistListResponse) => {
                                         return {
                                             ...page,
-                                            items: page.items.map((item: Artist) => {
+                                            items: page.items.map((item: AlbumArtist) => {
                                                 return itemIdSet.has(item.id)
                                                     ? { ...item, userRating: rating }
                                                     : item;
@@ -268,6 +363,54 @@ export const applyRatingOptimisticUpdates = (
                 });
             }
 
+            // Update infinite loader custom query keys
+            const infiniteLoaderQueryKey = [
+                variables.apiClientProps.serverId,
+                'item-list-infinite-loader',
+                LibraryItem.ARTIST,
+            ];
+
+            const infiniteLoaderQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: infiniteLoaderQueryKey,
+            });
+
+            if (infiniteLoaderQueries.length) {
+                infiniteLoaderQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(
+                            queryKey,
+                            (
+                                prev:
+                                    | undefined
+                                    | {
+                                          data: unknown[];
+                                          pagesLoaded: Record<string, boolean>;
+                                      },
+                            ) => {
+                                if (prev && prev.data) {
+                                    return {
+                                        ...prev,
+                                        data: prev.data.map((item: any) => {
+                                            if (!item || !item.id) {
+                                                return item;
+                                            }
+
+                                            return itemIdSet.has(item.id)
+                                                ? { ...item, userRating: rating }
+                                                : item;
+                                        }),
+                                    };
+                                }
+
+                                return prev;
+                            },
+                        );
+                    }
+                });
+            }
+
             break;
         }
         case LibraryItem.PLAYLIST_SONG:

src/renderer/features/sidebar/components/server-selector.tsx

@@ -9,7 +9,7 @@ import NavidromeLogo from '/@/renderer/features/servers/assets/navidrome.png';
 import OpenSubsonicLogo from '/@/renderer/features/servers/assets/opensubsonic.png';
 import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import { ServerSelectorItems } from '/@/renderer/features/sidebar/components/server-selector-items';
-import { useCurrentServer } from '/@/renderer/store';
+import { useAppStore, useCurrentServer } from '/@/renderer/store';
 import { hasFeature } from '/@/shared/api/utils';
 import { Box } from '/@/shared/components/box/box';
 import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
@@ -20,13 +20,10 @@ import { Text } from '/@/shared/components/text/text';
 import { ServerType } from '/@/shared/types/domain-types';
 import { ServerFeature } from '/@/shared/types/features-types';
 
-interface ServerSelectorProps {
+export const ServerSelector = () => {
-    showImage?: boolean;
-}
-
-export const ServerSelector = ({ showImage = false }: ServerSelectorProps) => {
     const { t } = useTranslation();
     const currentServer = useCurrentServer();
+    const showImage = useAppStore((state) => state.sidebar.image);
 
     const { data: musicFolders } = useQuery(
         currentServer

src/renderer/features/sidebar/components/sidebar.tsx

@@ -15,11 +15,11 @@ import {
     SidebarSharedPlaylistList,
 } from '/@/renderer/features/sidebar/components/sidebar-playlist-list';
 import {
+    useAppStore,
     useAppStoreActions,
     useFullScreenPlayerStore,
     usePlayerSong,
     useSetFullScreenPlayerStore,
-    useSidebarStore,
 } from '/@/renderer/store';
 import {
     SidebarItemType,
@@ -38,10 +38,8 @@ import { Platform } from '/@/shared/types/types';
 
 export const Sidebar = () => {
     const { t } = useTranslation();
-    const sidebar = useSidebarStore();
+
-    const { setSideBar } = useAppStoreActions();
     const { sidebarPlaylistList } = useGeneralSettings();
-    const currentSong = usePlayerSong();
 
     const translatedSidebarItemMap = useMemo(
         () => ({
@@ -59,36 +57,6 @@ export const Sidebar = () => {
         [t],
     );
 
-    const upsizedImageUrl = currentSong?.imageUrl
-        ?.replace(/size=\d+/, 'size=450')
-        .replace(/width=\d+/, 'width=450')
-        .replace(/height=\d+/, 'height=450');
-
-    const showImage = sidebar.image;
-    const isSongDefined = Boolean(currentSong?.id);
-
-    const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
-    const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
-    const expandFullScreenPlayer = () => {
-        setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
-    };
-
-    const handleToggleContextMenu = (e: MouseEvent<HTMLDivElement>) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (!currentSong) {
-            return;
-        }
-
-        if (isSongDefined && !isFullScreenPlayerExpanded) {
-            ContextMenuController.call({
-                cmd: { items: [currentSong!], type: LibraryItem.SONG },
-                event: e,
-            });
-        }
-    };
-
     const { sidebarItems } = useGeneralSettings();
     const { windowBarStyle } = useWindowSettings();
 
@@ -164,69 +132,110 @@ export const Sidebar = () => {
                 </Accordion>
             </ScrollArea>
             <motion.div className={styles.serverSelectorWrapper} layout>
-                <ServerSelector showImage={showImage} />
+                <ServerSelector />
             </motion.div>
-            <AnimatePresence initial={false} mode="popLayout">
+            <SidebarImage />
-                {showImage && (
-                    <motion.div
-                        animate={{ opacity: 1, y: 0 }}
-                        className={styles.imageContainer}
-                        exit={{ opacity: 0, y: 200 }}
-                        initial={{ opacity: 0, y: 200 }}
-                        key="sidebar-image"
-                        onClick={expandFullScreenPlayer}
-                        onContextMenu={handleToggleContextMenu}
-                        role="button"
-                        style={
-                            {
-                                '--sidebar-image-height': sidebar.leftWidth,
-                            } as CSSProperties
-                        }
-                        transition={{ duration: 0.3, ease: 'easeInOut' }}
-                    >
-                        <Tooltip
-                            label={t('player.toggleFullscreenPlayer', {
-                                postProcess: 'sentenceCase',
-                            })}
-                            openDelay={500}
-                        >
-                            {upsizedImageUrl ? (
-                                <img
-                                    className={styles.sidebarImage}
-                                    loading="eager"
-                                    src={upsizedImageUrl}
-                                />
-                            ) : (
-                                <ImageUnloader />
-                            )}
-                        </Tooltip>
-                        <ActionIcon
-                            icon="arrowDownS"
-                            iconProps={{
-                                size: 'lg',
-                            }}
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                setSideBar({ image: false });
-                            }}
-                            opacity={0.8}
-                            radius="md"
-                            style={{
-                                cursor: 'default',
-                                position: 'absolute',
-                                right: '1rem',
-                                top: '1rem',
-                            }}
-                            tooltip={{
-                                label: t('common.collapse', {
-                                    postProcess: 'titleCase',
-                                }),
-                                openDelay: 500,
-                            }}
-                        />
-                    </motion.div>
-                )}
-            </AnimatePresence>
         </div>
     );
 };
+
+const SidebarImage = () => {
+    const { t } = useTranslation();
+    const showImage = useAppStore((state) => state.sidebar.image);
+    const leftWidth = useAppStore((state) => state.sidebar.leftWidth);
+    const { setSideBar } = useAppStoreActions();
+    const currentSong = usePlayerSong();
+
+    const upsizedImageUrl = currentSong?.imageUrl
+        ?.replace(/size=\d+/, 'size=450')
+        .replace(/width=\d+/, 'width=450')
+        .replace(/height=\d+/, 'height=450');
+
+    const isSongDefined = Boolean(currentSong?.id);
+
+    const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
+    const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
+    const expandFullScreenPlayer = () => {
+        setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
+    };
+
+    const handleToggleContextMenu = (e: MouseEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!currentSong) {
+            return;
+        }
+
+        if (isSongDefined && !isFullScreenPlayerExpanded) {
+            ContextMenuController.call({
+                cmd: { items: [currentSong!], type: LibraryItem.SONG },
+                event: e,
+            });
+        }
+    };
+
+    return (
+        <AnimatePresence initial={false} mode="popLayout">
+            {showImage && (
+                <motion.div
+                    animate={{ opacity: 1, y: 0 }}
+                    className={styles.imageContainer}
+                    exit={{ opacity: 0, y: 200 }}
+                    initial={{ opacity: 0, y: 200 }}
+                    key="sidebar-image"
+                    onClick={expandFullScreenPlayer}
+                    onContextMenu={handleToggleContextMenu}
+                    role="button"
+                    style={
+                        {
+                            '--sidebar-image-height': leftWidth,
+                        } as CSSProperties
+                    }
+                    transition={{ duration: 0.3, ease: 'easeInOut' }}
+                >
+                    <Tooltip
+                        label={t('player.toggleFullscreenPlayer', {
+                            postProcess: 'sentenceCase',
+                        })}
+                        openDelay={500}
+                    >
+                        {upsizedImageUrl ? (
+                            <img
+                                className={styles.sidebarImage}
+                                loading="eager"
+                                src={upsizedImageUrl}
+                            />
+                        ) : (
+                            <ImageUnloader />
+                        )}
+                    </Tooltip>
+                    <ActionIcon
+                        icon="arrowDownS"
+                        iconProps={{
+                            size: 'lg',
+                        }}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            setSideBar({ image: false });
+                        }}
+                        opacity={0.8}
+                        radius="md"
+                        style={{
+                            cursor: 'default',
+                            position: 'absolute',
+                            right: '1rem',
+                            top: '1rem',
+                        }}
+                        tooltip={{
+                            label: t('common.collapse', {
+                                postProcess: 'titleCase',
+                            }),
+                            openDelay: 500,
+                        }}
+                    />
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+};

src/renderer/features/titlebar/components/app-menu.tsx

@@ -6,7 +6,7 @@ import { Link, useNavigate } from 'react-router';
 import packageJson from '../../../../../package.json';
 
 import { openSettingsModal } from '/@/renderer/features/settings/utils/open-settings-modal';
-import { useAppStore, useAppStoreActions, useSidebarStore } from '/@/renderer/store';
+import { useAppStore, useAppStoreActions } from '/@/renderer/store';
 import { DropdownMenu, MenuItemProps } from '/@/shared/components/dropdown-menu/dropdown-menu';
 import { Icon } from '/@/shared/components/icon/icon';
 import { toast } from '/@/shared/components/toast/toast';
@@ -67,8 +67,8 @@ interface RegularMenuItem extends BaseMenuItem {
 export const AppMenu = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
-    const { collapsed } = useSidebarStore();
+    const collapsed = useAppStore((state) => state.sidebar.collapsed);
-    const { privateMode } = useAppStore();
+    const privateMode = useAppStore((state) => state.privateMode);
     const { setPrivateMode, setSideBar } = useAppStoreActions();
 
     const handleBrowserDevTools = () => {

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

@@ -43,6 +43,7 @@ export const useFastAverageColor = (args: {
 }) => {
     const { algorithm, default: defaultColor, id, src, srcLoaded } = args;
     const idRef = useRef<string | undefined>(id);
+    const processingSrcRef = useRef<null | string | undefined>(null);
 
     const [isLoading, setIsLoading] = useState(false);
 
@@ -59,12 +60,23 @@ export const useFastAverageColor = (args: {
     useEffect(() => {
         let isMounted = true;
         let fac: FastAverageColor | null = null;
+        let timeoutId: NodeJS.Timeout | null = null;
+
+        // Reset loading state when src changes or srcLoaded becomes false
+        if (!src || !srcLoaded) {
+            setIsLoading(false);
+            processingSrcRef.current = null;
+        }
 
         if (src && srcLoaded) {
+            processingSrcRef.current = src;
             setIsLoading(true);
 
-            setTimeout(() => {
+            timeoutId = setTimeout(() => {
-                if (!isMounted) return;
+                // Check if src has changed since we started processing
+                if (!isMounted || processingSrcRef.current !== src) {
+                    return;
+                }
 
                 fac = new FastAverageColor();
                 fac.getColorAsync(src, {
@@ -73,7 +85,8 @@ export const useFastAverageColor = (args: {
                     mode: 'speed',
                 })
                     .then((color) => {
-                        if (isMounted) {
+                        // Only update if this is still the current src being processed
+                        if (isMounted && processingSrcRef.current === src) {
                             idRef.current = id;
                             setBackground({
                                 background: color.rgb,
@@ -81,6 +94,7 @@ export const useFastAverageColor = (args: {
                                 isLight: color.isLight,
                             });
                             setIsLoading(false);
+                            processingSrcRef.current = null;
                         }
                         if (fac) {
                             fac.destroy();
@@ -88,7 +102,8 @@ export const useFastAverageColor = (args: {
                         }
                     })
                     .catch((e) => {
-                        if (isMounted) {
+                        // Only update if this is still the current src being processed
+                        if (isMounted && processingSrcRef.current === src) {
                             console.error('Error fetching average color', e);
                             idRef.current = id;
                             setBackground({
@@ -97,6 +112,7 @@ export const useFastAverageColor = (args: {
                                 isLight: false,
                             });
                             setIsLoading(false);
+                            processingSrcRef.current = null;
                         }
                         if (fac) {
                             fac.destroy();
@@ -112,11 +128,18 @@ export const useFastAverageColor = (args: {
                     isDark: true,
                     isLight: false,
                 });
+                setIsLoading(false);
+                processingSrcRef.current = null;
             }
         }
 
         return () => {
             isMounted = false;
+            processingSrcRef.current = null;
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
             if (fac) {
                 fac.destroy();
                 fac = null;

src/renderer/layouts/default-layout/left-sidebar.tsx

@@ -5,7 +5,7 @@ import styles from './left-sidebar.module.css';
 import { ResizeHandle } from '/@/renderer/features/shared/components/resize-handle';
 import { CollapsedSidebar } from '/@/renderer/features/sidebar/components/collapsed-sidebar';
 import { Sidebar } from '/@/renderer/features/sidebar/components/sidebar';
-import { useSidebarStore } from '/@/renderer/store';
+import { useAppStore } from '/@/renderer/store';
 
 interface LeftSidebarProps {
     isResizing: boolean;
@@ -14,7 +14,7 @@ interface LeftSidebarProps {
 
 export const LeftSidebar = ({ isResizing, startResizing }: LeftSidebarProps) => {
     const sidebarRef = useRef<HTMLDivElement | null>(null);
-    const { collapsed } = useSidebarStore();
+    const collapsed = useAppStore((state) => state.sidebar.collapsed);
 
     return (
         <aside className={styles.container} id="sidebar">

src/renderer/layouts/default-layout/main-content.tsx

@@ -2,13 +2,14 @@ import clsx from 'clsx';
 import { motion } from 'motion/react';
 import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import { Outlet } from 'react-router';
+import { shallow } from 'zustand/shallow';
 
 import styles from './main-content.module.css';
 
 import { FullScreenOverlay } from '/@/renderer/layouts/default-layout/full-screen-overlay';
 import { LeftSidebar } from '/@/renderer/layouts/default-layout/left-sidebar';
 import { RightSidebar } from '/@/renderer/layouts/default-layout/right-sidebar';
-import { useAppStoreActions, useSidebarStore } from '/@/renderer/store';
+import { useAppStore, useAppStoreActions } from '/@/renderer/store';
 import { useGeneralSettings } from '/@/renderer/store/settings.store';
 import { constrainRightSidebarWidth, constrainSidebarWidth } from '/@/renderer/utils';
 import { Spinner } from '/@/shared/components/spinner/spinner';
@@ -16,7 +17,15 @@ import { Spinner } from '/@/shared/components/spinner/spinner';
 const MINIMUM_SIDEBAR_WIDTH = 260;
 
 export const MainContent = ({ shell }: { shell?: boolean }) => {
-    const { collapsed, leftWidth, rightExpanded, rightWidth } = useSidebarStore();
+    const { collapsed, leftWidth, rightExpanded, rightWidth } = useAppStore(
+        (state) => ({
+            collapsed: state.sidebar.collapsed,
+            leftWidth: state.sidebar.leftWidth,
+            rightExpanded: state.sidebar.rightExpanded,
+            rightWidth: state.sidebar.rightWidth,
+        }),
+        shallow,
+    );
     const { setSideBar } = useAppStoreActions();
     const { sideQueueType } = useGeneralSettings();
     const [isResizing, setIsResizing] = useState(false);

src/renderer/layouts/default-layout/right-sidebar.tsx

@@ -4,7 +4,7 @@ import styles from './right-sidebar.module.css';
 
 import { SidebarPlayQueue } from '/@/renderer/features/now-playing/components/sidebar-play-queue';
 import { ResizeHandle } from '/@/renderer/features/shared/components/resize-handle';
-import { useGeneralSettings, useSidebarStore } from '/@/renderer/store';
+import { useAppStore, useGeneralSettings } from '/@/renderer/store';
 
 // const queueDrawerVariants: Variants = {
 //     closed: (windowBarStyle) => ({
@@ -54,7 +54,7 @@ export const RightSidebar = forwardRef(
         { isResizing: isResizingRight, startResizing }: RightSidebarProps,
         ref: Ref<HTMLDivElement>,
     ) => {
-        const { rightExpanded } = useSidebarStore();
+        const rightExpanded = useAppStore((state) => state.sidebar.rightExpanded);
         const { sideQueueType } = useGeneralSettings();
 
         return (

src/renderer/layouts/default-layout/side-drawer-queue.tsx

@@ -6,7 +6,7 @@ import styles from './side-drawer-queue.module.css';
 
 import { DrawerPlayQueue } from '/@/renderer/features/now-playing/components/drawer-play-queue';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useAppStore, useSidebarStore } from '/@/renderer/store';
+import { useAppStore } from '/@/renderer/store';
 import { Icon } from '/@/shared/components/icon/icon';
 import { useDisclosure } from '/@/shared/hooks/use-disclosure';
 import { useTimeout } from '/@/shared/hooks/use-timeout';
@@ -66,7 +66,7 @@ const queueDrawerButtonVariants: Variants = {
 export const SideDrawerQueue = () => {
     const location = useLocation();
     const [drawer, drawerHandler] = useDisclosure(false);
-    const { rightExpanded } = useSidebarStore();
+    const rightExpanded = useAppStore((state) => state.sidebar.rightExpanded);
 
     const drawerTimeout = useTimeout(() => drawerHandler.open(), 500);
 

src/renderer/layouts/window-bar.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import isElectron from 'is-electron';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { RiCheckboxBlankLine, RiCloseLine, RiSubtractLine } from 'react-icons/ri';
 
 import appIcon from '../../../assets/icons/32x32.png';
@@ -124,7 +124,7 @@ const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
 export const WindowBar = () => {
     const { windowBarStyle } = useWindowSettings();
     const playerStatus = usePlayerStatus();
-    const { privateMode } = useAppStore();
+    const privateMode = useAppStore((state) => state.privateMode);
     const handleMinimize = () => minimize();
 
     const { currentSong, index, queueLength } = usePlayerData();
@@ -150,10 +150,13 @@ export const WindowBar = () => {
                 ? `${statusString}${queueString}${currentSong?.name}${currentSong?.artistName ? ` — ${currentSong?.artistName} — Feishin` : ''}`
                 : 'Feishin'
         }${privateMode ? ` ${privateModeString}` : ''}`;
-        document.title = title;
         return title;
     }, [currentSong?.artistName, currentSong?.name, index, playerStatus, privateMode, queueLength]);
 
+    useEffect(() => {
+        document.title = title;
+    }, [title]);
+
     if (windowBarStyle === Platform.WEB) {
         return null;
     }

src/renderer/store/player.store.ts

@@ -1,9 +1,9 @@
 import merge from 'lodash/merge';
 import { nanoid } from 'nanoid';
-import { create } from 'zustand';
 import { createJSONStorage, persist, subscribeWithSelector } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { useShallow } from 'zustand/react/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
 
 import { createSelectors } from '/@/renderer/lib/zustand';
 import { useSettingsStore } from '/@/renderer/store/settings.store';
@@ -256,7 +256,7 @@ const initialState: State = {
     },
 };
 
-export const usePlayerStoreBase = create<PlayerState>()(
+export const usePlayerStoreBase = createWithEqualityFn<PlayerState>()(
     persist(
         subscribeWithSelector(
             immer((set, get) => ({
@@ -2243,19 +2243,18 @@ export const usePlayerSpeed = () => {
 };
 
 export const usePlayerSong = () => {
-    return usePlayerStoreBase((state) => {
+    return usePlayerStoreBase(
-        const queue = state.getQueue();
+        (state) => {
-        let index = state.player.index;
+            return state.getCurrentSong();
-
+        },
-        // If shuffle is enabled, map shuffled position to actual queue position
+        (prev, next) => {
-        if (state.player.shuffle === PlayerShuffle.TRACK && state.queue.shuffled.length > 0) {
+            return (
-            if (index >= 0 && index < state.queue.shuffled.length) {
+                prev?._uniqueId === next?._uniqueId &&
-                index = state.queue.shuffled[index];
+                prev?.userFavorite === next?.userFavorite &&
-            }
+                prev?.userRating === next?.userRating
-        }
+            );
-
+        },
-        return queue.items[index];
+    );
-    });
 };
 
 export const usePlayerNum = () => {

src/shared/components/image/image.tsx

@@ -1,5 +1,12 @@
 import clsx from 'clsx';
-import { ForwardedRef, forwardRef, HTMLAttributes, type ImgHTMLAttributes, ReactNode } from 'react';
+import {
+    ForwardedRef,
+    forwardRef,
+    HTMLAttributes,
+    type ImgHTMLAttributes,
+    memo,
+    ReactNode,
+} from 'react';
 import { Img } from 'react-image';
 
 import styles from './image.module.css';
@@ -34,10 +41,10 @@ interface ImageUnloaderProps {
 export const FALLBACK_SVG =
     'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=';
 
-export function Image({
+export function BaseImage({
     className,
     containerClassName,
-    enableAnimation,
+    enableAnimation = false,
     imageContainerProps,
     includeLoader = true,
     includeUnloader = true,
@@ -62,6 +69,8 @@ export function Image({
                         {children}
                     </ImageContainer>
                 )}
+                decoding="async"
+                fetchPriority={inViewport ? 'high' : 'low'}
                 loader={
                     includeLoader ? (
                         <ImageContainer className={containerClassName}>
@@ -69,6 +78,7 @@ export function Image({
                         </ImageContainer>
                     ) : null
                 }
+                loading={inViewport ? 'eager' : 'lazy'}
                 src={inViewport ? src : FALLBACK_SVG}
                 unloader={
                     includeUnloader ? (
@@ -89,6 +99,8 @@ export function Image({
     );
 }
 
+export const Image = memo(BaseImage);
+
 const ImageContainer = forwardRef(
     (
         { children, className, enableAnimation, ...props }: ImageContainerProps,

src/shared/components/skeleton/skeleton.tsx

@@ -1,6 +1,5 @@
-import type { CSSProperties } from 'react';
-
 import clsx from 'clsx';
+import { type CSSProperties, memo } from 'react';
 import RSkeleton from 'react-loading-skeleton';
 
 import styles from './skeleton.module.css';
@@ -22,7 +21,7 @@ interface SkeletonProps {
     width?: number | string;
 }
 
-export function Skeleton({
+export function BaseSkeleton({
     baseColor,
     borderRadius,
     className,
@@ -54,3 +53,7 @@ export function Skeleton({
         />
     );
 }
+
+export const Skeleton = memo(BaseSkeleton);
+
+Skeleton.displayName = 'Skeleton';