add optimistic update for favorite/ratings mutations

src/renderer/api/query-keys.ts

@@ -71,6 +71,18 @@ export const queryKeys: Record<
 
             return [serverId, 'albumArtists', 'detail'] as const;
         },
+        infiniteList: (serverId: string, query?: AlbumArtistListQuery) => {
+            const { filter, pagination } = splitPaginatedQuery(query);
+            if (query && pagination) {
+                return [serverId, 'albumArtists', 'infiniteList', filter, pagination] as const;
+            }
+
+            if (query) {
+                return [serverId, 'albumArtists', 'infiniteList', filter] as const;
+            }
+
+            return [serverId, 'albumArtists', 'infiniteList'] as const;
+        },
         list: (serverId: string, query?: AlbumArtistListQuery) => {
             const { filter, pagination } = splitPaginatedQuery(query);
             if (query && pagination) {
@@ -118,6 +130,27 @@ export const queryKeys: Record<
 
             return [serverId, 'albums', 'detail'] as const;
         },
+        infiniteList: (serverId: string, query?: AlbumListQuery, artistId?: string) => {
+            const { filter, pagination } = splitPaginatedQuery(query);
+
+            if (query && pagination && artistId) {
+                return [serverId, 'albums', 'infiniteList', artistId, filter, pagination] as const;
+            }
+
+            if (query && pagination) {
+                return [serverId, 'albums', 'infiniteList', filter, pagination] as const;
+            }
+
+            if (query && artistId) {
+                return [serverId, 'albums', 'infiniteList', artistId, filter] as const;
+            }
+
+            if (query) {
+                return [serverId, 'albums', 'infiniteList', filter] as const;
+            }
+
+            return [serverId, 'albums', 'infiniteList'] as const;
+        },
         list: (serverId: string, query?: AlbumListQuery, artistId?: string) => {
             const { filter, pagination } = splitPaginatedQuery(query);
 
@@ -165,6 +198,18 @@ export const queryKeys: Record<
 
             return [serverId, 'artists', 'count'] as const;
         },
+        infiniteList: (serverId: string, query?: ArtistListQuery) => {
+            const { filter, pagination } = splitPaginatedQuery(query);
+            if (query && pagination) {
+                return [serverId, 'artists', 'infiniteList', filter, pagination] as const;
+            }
+
+            if (query) {
+                return [serverId, 'artists', 'infiniteList', filter] as const;
+            }
+
+            return [serverId, 'artists', 'infiniteList'] as const;
+        },
         list: (serverId: string, query?: ArtistListQuery) => {
             const { filter, pagination } = splitPaginatedQuery(query);
             if (query && pagination) {

src/renderer/components/item-card/item-card-controls.tsx

@@ -7,6 +7,9 @@ import styles from './item-card-controls.module.css';
 import { ItemListStateActions } from '/@/renderer/components/item-list/helpers/item-list-state';
 import { ItemControls } from '/@/renderer/components/item-list/types';
 import { useIsPlayerFetching } from '/@/renderer/features/player/context/player-context';
+import { useIsMutatingCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
+import { useIsMutatingDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
+import { useIsMutatingRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
 import { animationVariants } from '/@/shared/components/animations/animation-variants';
 import { AppIcon, Icon, IconProps } from '/@/shared/components/icon/icon';
 import { Rating } from '/@/shared/components/rating/rating';
@@ -127,16 +130,6 @@ const createRatingChangeHandler =
         });
     };
 
-const ratingClickHandler = (e: MouseEvent<HTMLElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-};
-
-const ratingMouseDownHandler = (e: React.MouseEvent<HTMLElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-};
-
 const moreDoubleClickHandler = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     e.preventDefault();
@@ -225,14 +218,6 @@ export const ItemCardControls = ({
 
     const isFavorite = (item as { userFavorite?: boolean })?.userFavorite ?? false;
 
-    const favoriteIconProps = useMemo<Partial<IconProps>>(
-        () => ({
-            color: isFavorite ? ('primary' as const) : ('default' as const),
-            fill: isFavorite ? ('primary' as const) : undefined,
-        }),
-        [isFavorite],
-    );
-
     return (
         <motion.div className={clsx(styles.container)} {...containerProps[type]}>
             {controls?.onPlay && (
@@ -251,20 +236,12 @@ export const ItemCardControls = ({
                 </>
             )}
             {controls?.onFavorite && (
-                <SecondaryButton
+                <FavoriteButton isFavorite={isFavorite} onClick={favoriteHandler} />
-                    className={styles.favorite}
-                    icon="favorite"
-                    iconProps={favoriteIconProps}
-                    onClick={favoriteHandler}
-                />
             )}
             {controls?.onRating && (
-                <Rating
+                <RatingButton
-                    className={styles.rating}
                     onChange={ratingChangeHandler}
-                    onClick={ratingClickHandler}
+                    rating={(item as { userRating: number }).userRating}
-                    onMouseDown={ratingMouseDownHandler}
-                    size="xs"
                 />
             )}
             {controls?.onMore && (
@@ -286,6 +263,67 @@ export const ItemCardControls = ({
     );
 };
 
+const FavoriteButton = memo(
+    ({
+        isFavorite,
+        onClick,
+    }: {
+        isFavorite: boolean;
+        onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    }) => {
+        const isMutatingCreate = useIsMutatingCreateFavorite();
+        const isMutatingDelete = useIsMutatingDeleteFavorite();
+        const isMutating = isMutatingCreate || isMutatingDelete;
+
+        const favoriteIconProps = useMemo<Partial<IconProps>>(
+            () => ({
+                color: isFavorite ? ('primary' as const) : ('default' as const),
+                fill: isFavorite ? ('primary' as const) : undefined,
+            }),
+            [isFavorite],
+        );
+
+        return (
+            <SecondaryButton
+                className={styles.favorite}
+                disabled={isMutating}
+                icon="favorite"
+                iconProps={favoriteIconProps}
+                onClick={onClick}
+            />
+        );
+    },
+    (prev, next) => prev.isFavorite === next.isFavorite,
+);
+
+const RatingButton = memo(
+    ({ onChange, rating }: { onChange: (rating: number) => void; rating: number }) => {
+        const ratingClickHandler = (e: MouseEvent<HTMLElement>) => {
+            e.stopPropagation();
+            e.preventDefault();
+        };
+
+        const ratingMouseDownHandler = (e: React.MouseEvent<HTMLElement>) => {
+            e.stopPropagation();
+            e.preventDefault();
+        };
+
+        const isMutatingRating = useIsMutatingRating();
+        return (
+            <Rating
+                className={styles.rating}
+                onChange={onChange}
+                onClick={ratingClickHandler}
+                onMouseDown={ratingMouseDownHandler}
+                readOnly={isMutatingRating}
+                size="sm"
+                value={rating}
+            />
+        );
+    },
+    (prev, next) => prev.rating === next.rating,
+);
+
 const PlayButton = memo(
     ({
         disabled,
@@ -360,6 +398,7 @@ const SecondaryPlayButton = memo(
 
 interface SecondaryButtonProps {
     className?: string;
+    disabled?: boolean;
     icon: keyof typeof AppIcon;
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
@@ -367,6 +406,7 @@ interface SecondaryButtonProps {
 const SecondaryButton = memo(
     ({
         className,
+        disabled,
         icon,
         iconProps,
         onClick,
@@ -395,6 +435,7 @@ const SecondaryButton = memo(
         return (
             <button
                 className={clsx(styles.secondaryButton, className)}
+                disabled={disabled}
                 onClick={handleClick}
                 onDoubleClick={handleDoubleClick}
                 onMouseDown={handleMouseDown}

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

@@ -116,7 +116,7 @@ export const useItemListInfiniteLoader = ({
                         query: queryParams,
                     });
 
-                    return result.items;
+                    return result;
                 },
                 queryKey: queryKeys[getQueryKeyName(itemType)].list(serverId, queryParams),
                 staleTime: 1000 * 15,
@@ -130,7 +130,7 @@ export const useItemListInfiniteLoader = ({
                 (oldData: { data: unknown[]; pagesLoaded: Record<string, boolean> }) => {
                     const newData = [
                         ...oldData.data.slice(0, startIndex),
-                        ...result,
+                        ...result.items,
                         ...oldData.data.slice(endIndex),
                     ];
                     const newPagesLoaded = {

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

@@ -3,6 +3,8 @@ import {
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { ItemListItem } from '/@/renderer/components/item-list/types';
+import { useIsMutatingCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
+import { useIsMutatingDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 
 export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
@@ -10,11 +12,16 @@ export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
         props.columns[props.columnIndex].id
     ];
 
+    const isMutatingCreateFavorite = useIsMutatingCreateFavorite();
+    const isMutatingDeleteFavorite = useIsMutatingDeleteFavorite();
+    const isMutatingFavorite = isMutatingCreateFavorite || isMutatingDeleteFavorite;
+
     if (typeof row === 'boolean') {
         return (
             <TableColumnContainer {...props}>
                 <ActionIcon
                     className={row ? undefined : 'hover-only'}
+                    disabled={isMutatingFavorite}
                     icon="favorite"
                     iconProps={{
                         color: row ? 'primary' : 'muted',

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

@@ -3,6 +3,7 @@ import {
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { ItemListItem } from '/@/renderer/components/item-list/types';
+import { useIsMutatingRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
 import { Rating } from '/@/shared/components/rating/rating';
 
 export const RatingColumn = (props: ItemTableListInnerColumn) => {
@@ -10,6 +11,8 @@ export const RatingColumn = (props: ItemTableListInnerColumn) => {
         props.columns[props.columnIndex].id
     ];
 
+    const isMutatingRating = useIsMutatingRating();
+
     if (typeof row === 'number' || row === null) {
         return (
             <TableColumnContainer {...props}>
@@ -28,6 +31,7 @@ export const RatingColumn = (props: ItemTableListInnerColumn) => {
                             rating,
                         });
                     }}
+                    readOnly={isMutatingRating}
                     size="xs"
                     value={row || 0}
                 />

src/renderer/features/albums/components/album-detail-content.tsx

@@ -338,6 +338,7 @@ export const AlbumDetailContent = () => {
                     ? [detailQuery?.data?.albumArtists[0].id]
                     : undefined,
             },
+            rowCount: 1,
             sortBy: AlbumListSort.YEAR,
             sortOrder: SortOrder.DESC,
             title: t('page.albumDetail.moreFromArtist', { postProcess: 'sentenceCase' }),
@@ -351,6 +352,7 @@ export const AlbumDetailContent = () => {
                     ? [detailQuery?.data?.genres[0].id]
                     : undefined,
             },
+            rowCount: 2,
             sortBy: AlbumListSort.RANDOM,
             sortOrder: SortOrder.ASC,
             title: `${t('page.albumDetail.moreFromGeneric', {
@@ -402,7 +404,7 @@ export const AlbumDetailContent = () => {
                                         excludeIds={carousel.excludeIds}
                                         key={`carousel-${carousel.uniqueId}`}
                                         query={carousel.query}
-                                        rowCount={1}
+                                        rowCount={carousel.rowCount}
                                         sortBy={carousel.sortBy}
                                         sortOrder={carousel.sortOrder}
                                         title={carousel.title}

src/renderer/features/albums/components/album-infinite-carousel.tsx

@@ -121,7 +121,7 @@ function useAlbumListInfinite(
                 },
             });
         },
-        queryKey: queryKeys.albums.list(serverId, {
+        queryKey: queryKeys.albums.infiniteList(serverId, {
             sortBy,
             sortOrder,
             ...additionalQuery,

src/renderer/features/artists/components/album-artist-infinite-carousel.tsx

@@ -123,7 +123,7 @@ function useAlbumArtistListInfinite(
                 },
             });
         },
-        queryKey: queryKeys.albumArtists.list(serverId, {
+        queryKey: queryKeys.albumArtists.infiniteList(serverId, {
             sortBy,
             sortOrder,
             ...additionalQuery,

src/renderer/features/player/mutations/scrobble-mutation.ts

@@ -3,12 +3,10 @@ import { AxiosError } from 'axios';
 
 import { api } from '/@/renderer/api';
 import { MutationOptions } from '/@/renderer/lib/react-query';
-import { usePlayEvent } from '/@/renderer/store/event.store';
 import { ScrobbleArgs, ScrobbleResponse } from '/@/shared/types/domain-types';
 
 export const useSendScrobble = (options?: MutationOptions) => {
     // const incrementPlayCount = useIncrementQueuePlayCount();
-    const sendPlayEvent = usePlayEvent();
 
     return useMutation<ScrobbleResponse, AxiosError, ScrobbleArgs, null>({
         mutationFn: (args) => {
@@ -21,7 +19,7 @@ export const useSendScrobble = (options?: MutationOptions) => {
             // Manually increment the play count for the song in the queue if scrobble was submitted
             if (variables.query.submission) {
                 // incrementPlayCount([variables.query.id]);
-                sendPlayEvent(variables.query.id);
+                // sendPlayEvent(variables.query.id);
             }
         },
         ...options,

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

@@ -185,6 +185,7 @@ export const LibraryHeaderMenu = ({
     const isMutatingRating = useIsMutatingRating();
     const isMutatingCreateFavorite = useIsMutatingCreateFavorite();
     const isMutatingDeleteFavorite = useIsMutatingDeleteFavorite();
+    const isMutatingFavorite = isMutatingCreateFavorite || isMutatingDeleteFavorite;
 
     return (
         <div className={styles.libraryHeaderMenu}>
@@ -203,7 +204,7 @@ export const LibraryHeaderMenu = ({
                 )}
                 {onFavorite && (
                     <ActionIcon
-                        disabled={isMutatingCreateFavorite || isMutatingDeleteFavorite}
+                        disabled={isMutatingFavorite}
                         icon="favorite"
                         iconProps={{
                             fill: favorite ? 'primary' : undefined,

src/renderer/features/shared/mutations/create-favorite-mutation.ts

@@ -1,33 +1,47 @@
 import { useIsMutating, useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import isElectron from 'is-electron';
+import { useTranslation } from 'react-i18next';
 
 import { api } from '/@/renderer/api';
-import { queryKeys } from '/@/renderer/api/query-keys';
 import { eventEmitter } from '/@/renderer/events/event-emitter';
+import {
+    applyFavoriteOptimisticUpdates,
+    PreviousQueryData,
+    restoreFavoriteQueryData,
+} from '/@/renderer/features/shared/mutations/favorite-optimistic-updates';
 import { MutationHookArgs } from '/@/renderer/lib/react-query';
-import { useFavoriteEvent } from '/@/renderer/store/event.store';
+import { toast } from '/@/shared/components/toast/toast';
 import { FavoriteArgs, FavoriteResponse, LibraryItem } from '/@/shared/types/domain-types';
 
 const remote = isElectron() ? window.api.remote : null;
 
-const createFavoriteQueryKey = ['set-favorite', true];
+const createFavoriteMutationKey = ['set-favorite', true];
 
 export const useCreateFavorite = (args: MutationHookArgs) => {
     const { options } = args || {};
     const queryClient = useQueryClient();
+    const { t } = useTranslation();
 
-    const setFavoriteEvent = useFavoriteEvent();
+    return useMutation<FavoriteResponse, AxiosError, FavoriteArgs, PreviousQueryData[]>({
-
-    return useMutation<FavoriteResponse, AxiosError, FavoriteArgs, null>({
         mutationFn: (args) => {
             return api.controller.createFavorite({
                 ...args,
                 apiClientProps: { serverId: args.apiClientProps.serverId },
             });
         },
-        mutationKey: createFavoriteQueryKey,
+        mutationKey: createFavoriteMutationKey,
-        onError: (_error, variables) => {
+        onError: (_error, variables, context) => {
+            if (context) {
+                restoreFavoriteQueryData(queryClient, context);
+            }
+
+            toast.show({
+                message: _error.message,
+                title: t('error.genericError', { postProcess: 'sentenceCase' }) as string,
+                type: 'error',
+            });
+
             eventEmitter.emit('USER_FAVORITE', {
                 favorite: false,
                 id: variables.query.id,
@@ -43,69 +57,11 @@ export const useCreateFavorite = (args: MutationHookArgs) => {
                 serverId: variables.apiClientProps.serverId,
             });
 
-            return null;
+            return applyFavoriteOptimisticUpdates(queryClient, variables, true);
         },
         onSuccess: (_data, variables) => {
             if (variables.query.type === LibraryItem.SONG) {
                 remote?.updateFavorite(true, variables.apiClientProps.serverId, variables.query.id);
-                setFavoriteEvent(variables.query.id, true);
-            }
-
-            switch (variables.query.type) {
-                case LibraryItem.ALBUM: {
-                    const queryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey,
-                    });
-
-                    break;
-                }
-                case LibraryItem.ALBUM_ARTIST: {
-                    const queryKey = queryKeys.albumArtists.detail(
-                        variables.apiClientProps.serverId,
-                    );
-
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey,
-                    });
-
-                    break;
-                }
-                case LibraryItem.ARTIST: {
-                    const queryKey = queryKeys.artists.detail(variables.apiClientProps.serverId);
-
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey,
-                    });
-
-                    break;
-                }
-                case LibraryItem.PLAYLIST_SONG:
-                case LibraryItem.QUEUE_SONG:
-                case LibraryItem.SONG: {
-                    const songDetailQueryKey = queryKeys.songs.detail(
-                        variables.apiClientProps.serverId,
-                    );
-
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey: songDetailQueryKey,
-                    });
-
-                    const albumDetailQueryKey = queryKeys.albums.detail(
-                        variables.apiClientProps.serverId,
-                    );
-
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey: albumDetailQueryKey,
-                    });
-
-                    break;
-                }
             }
         },
         ...options,
@@ -113,6 +69,6 @@ export const useCreateFavorite = (args: MutationHookArgs) => {
 };
 
 export const useIsMutatingCreateFavorite = () => {
-    const mutatingCount = useIsMutating({ mutationKey: createFavoriteQueryKey });
+    const mutatingCount = useIsMutating({ mutationKey: createFavoriteMutationKey });
     return mutatingCount > 0;
 };

src/renderer/features/shared/mutations/delete-favorite-mutation.ts

@@ -1,36 +1,52 @@
 import { useIsMutating, useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import isElectron from 'is-electron';
+import { useTranslation } from 'react-i18next';
 
 import { api } from '/@/renderer/api';
-import { queryKeys } from '/@/renderer/api/query-keys';
 import { eventEmitter } from '/@/renderer/events/event-emitter';
+import {
+    applyFavoriteOptimisticUpdates,
+    PreviousQueryData,
+    restoreFavoriteQueryData,
+} from '/@/renderer/features/shared/mutations/favorite-optimistic-updates';
 import { MutationHookArgs } from '/@/renderer/lib/react-query';
-import { useFavoriteEvent } from '/@/renderer/store/event.store';
+import { toast } from '/@/shared/components/toast/toast';
 import { FavoriteArgs, FavoriteResponse, LibraryItem } from '/@/shared/types/domain-types';
 
 const remote = isElectron() ? window.api.remote : null;
 
-const deleteFavoriteQueryKey = ['set-favorite', false];
+const deleteFavoriteMutationKey = ['set-favorite', false];
 
 export const useDeleteFavorite = (args: MutationHookArgs) => {
     const { options } = args || {};
     const queryClient = useQueryClient();
-    const setFavoriteEvent = useFavoriteEvent();
+    const { t } = useTranslation();
-    return useMutation<FavoriteResponse, AxiosError, FavoriteArgs, null>({
+
+    return useMutation<FavoriteResponse, AxiosError, FavoriteArgs, PreviousQueryData[]>({
         mutationFn: (args) => {
             return api.controller.deleteFavorite({
                 ...args,
                 apiClientProps: { serverId: args.apiClientProps.serverId },
             });
         },
-        mutationKey: deleteFavoriteQueryKey,
+        mutationKey: deleteFavoriteMutationKey,
-        onError: (_error, variables) => {
+        onError: (_error, _variables, context) => {
+            if (context) {
+                restoreFavoriteQueryData(queryClient, context);
+            }
+
+            toast.show({
+                message: _error.message,
+                title: t('error.genericError', { postProcess: 'sentenceCase' }) as string,
+                type: 'error',
+            });
+
             eventEmitter.emit('USER_FAVORITE', {
                 favorite: true,
-                id: variables.query.id,
+                id: _variables.query.id,
-                itemType: variables.query.type,
+                itemType: _variables.query.type,
-                serverId: variables.apiClientProps.serverId,
+                serverId: _variables.apiClientProps.serverId,
             });
         },
         onMutate: (variables) => {
@@ -41,7 +57,7 @@ export const useDeleteFavorite = (args: MutationHookArgs) => {
                 serverId: variables.apiClientProps.serverId,
             });
 
-            return null;
+            return applyFavoriteOptimisticUpdates(queryClient, variables, false);
         },
         onSuccess: (_data, variables) => {
             if (variables.query.type === LibraryItem.SONG) {
@@ -50,64 +66,6 @@ export const useDeleteFavorite = (args: MutationHookArgs) => {
                     variables.apiClientProps.serverId,
                     variables.query.id,
                 );
-                setFavoriteEvent(variables.query.id, false);
-            }
-
-            switch (variables.query.type) {
-                case LibraryItem.ALBUM: {
-                    const queryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey,
-                    });
-
-                    break;
-                }
-                case LibraryItem.ALBUM_ARTIST: {
-                    const queryKey = queryKeys.albumArtists.detail(
-                        variables.apiClientProps.serverId,
-                    );
-
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey,
-                    });
-
-                    break;
-                }
-                case LibraryItem.ARTIST: {
-                    const queryKey = queryKeys.artists.detail(variables.apiClientProps.serverId);
-
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey,
-                    });
-
-                    break;
-                }
-                case LibraryItem.PLAYLIST_SONG:
-                case LibraryItem.QUEUE_SONG:
-                case LibraryItem.SONG: {
-                    const songDetailQueryKey = queryKeys.songs.detail(
-                        variables.apiClientProps.serverId,
-                    );
-
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey: songDetailQueryKey,
-                    });
-
-                    const albumDetailQueryKey = queryKeys.albums.detail(
-                        variables.apiClientProps.serverId,
-                    );
-
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey: albumDetailQueryKey,
-                    });
-
-                    break;
-                }
             }
         },
         ...options,
@@ -115,6 +73,6 @@ export const useDeleteFavorite = (args: MutationHookArgs) => {
 };
 
 export const useIsMutatingDeleteFavorite = () => {
-    const mutatingCount = useIsMutating({ mutationKey: deleteFavoriteQueryKey });
+    const mutatingCount = useIsMutating({ mutationKey: deleteFavoriteMutationKey });
     return mutatingCount > 0;
 };

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

@@ -0,0 +1,389 @@
+import { QueryClient } from '@tanstack/react-query';
+
+import { queryKeys } from '/@/renderer/api/query-keys';
+import {
+    Album,
+    AlbumArtist,
+    AlbumArtistDetailResponse,
+    AlbumArtistListResponse,
+    AlbumDetailResponse,
+    AlbumListResponse,
+    Artist,
+    ArtistListResponse,
+    FavoriteArgs,
+    LibraryItem,
+    Song,
+    SongDetailResponse,
+} from '/@/shared/types/domain-types';
+
+export interface PreviousQueryData {
+    data: unknown;
+    queryKey: readonly unknown[];
+}
+
+export const applyFavoriteOptimisticUpdates = (
+    queryClient: QueryClient,
+    variables: FavoriteArgs,
+    isFavorite: boolean,
+): PreviousQueryData[] => {
+    const previousQueries: PreviousQueryData[] = [];
+    const itemIdSet = new Set<string>();
+
+    if (Array.isArray(variables.query.id)) {
+        variables.query.id.forEach((id) => {
+            itemIdSet.add(id);
+        });
+    } else {
+        itemIdSet.add(variables.query.id);
+    }
+
+    switch (variables.query.type) {
+        case LibraryItem.ALBUM: {
+            const detailQueryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
+
+            const detailQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: detailQueryKey,
+            });
+
+            if (detailQueries.length) {
+                detailQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: AlbumDetailResponse) => {
+                            if (prev && itemIdSet.has(prev.id)) {
+                                return {
+                                    ...prev,
+                                    userFavorite: isFavorite,
+                                };
+                            }
+
+                            return prev;
+                        });
+                    }
+                });
+            }
+
+            const listQueryKey = queryKeys.albums.list(variables.apiClientProps.serverId);
+
+            const listQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: listQueryKey,
+            });
+
+            if (listQueries.length) {
+                listQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: AlbumListResponse) => {
+                            if (prev) {
+                                return {
+                                    ...prev,
+                                    items: prev.items.map((item: Album) => {
+                                        return itemIdSet.has(item.id)
+                                            ? { ...item, userFavorite: isFavorite }
+                                            : item;
+                                    }),
+                                };
+                            }
+
+                            return prev;
+                        });
+                    }
+                });
+            }
+
+            const infiniteListQueryKey = queryKeys.albums.infiniteList(
+                variables.apiClientProps.serverId,
+            );
+
+            const infiniteListQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: infiniteListQueryKey,
+            });
+
+            if (infiniteListQueries.length) {
+                infiniteListQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(
+                            queryKey,
+                            (prev: { pageParams: string[]; pages: AlbumListResponse[] }) => {
+                                if (prev) {
+                                    return {
+                                        ...prev,
+                                        pages: prev.pages.map((page: AlbumListResponse) => {
+                                            return {
+                                                ...page,
+                                                items: page.items.map((item: Album) => {
+                                                    return itemIdSet.has(item.id)
+                                                        ? { ...item, userFavorite: isFavorite }
+                                                        : item;
+                                                }),
+                                            };
+                                        }),
+                                    };
+                                }
+
+                                return prev;
+                            },
+                        );
+                    }
+                });
+            }
+
+            break;
+        }
+        case LibraryItem.ALBUM_ARTIST: {
+            const detailQueryKey = queryKeys.albumArtists.detail(variables.apiClientProps.serverId);
+
+            const detailQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: detailQueryKey,
+            });
+
+            if (detailQueries.length) {
+                detailQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: AlbumArtistDetailResponse) => {
+                            if (prev && itemIdSet.has(prev.id)) {
+                                return {
+                                    ...prev,
+                                    userFavorite: isFavorite,
+                                };
+                            }
+
+                            return prev;
+                        });
+                    }
+                });
+            }
+            const listQueryKey = queryKeys.albumArtists.list(variables.apiClientProps.serverId);
+
+            const listQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: listQueryKey,
+            });
+
+            if (listQueries.length) {
+                listQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: AlbumArtistListResponse) => {
+                            if (prev) {
+                                return {
+                                    ...prev,
+                                    items: prev.items.map((item: AlbumArtist) => {
+                                        return itemIdSet.has(item.id)
+                                            ? { ...item, userFavorite: isFavorite }
+                                            : item;
+                                    }),
+                                };
+                            }
+
+                            return prev;
+                        });
+                    }
+                });
+            }
+
+            const infiniteListQueryKey = queryKeys.albumArtists.infiniteList(
+                variables.apiClientProps.serverId,
+            );
+
+            const infiniteListQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: infiniteListQueryKey,
+            });
+
+            if (infiniteListQueries.length) {
+                infiniteListQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(
+                            queryKey,
+                            (prev: { pageParams: string[]; pages: AlbumArtistListResponse[] }) => {
+                                return {
+                                    ...prev,
+                                    pages: prev.pages.map((page: AlbumArtistListResponse) => {
+                                        return {
+                                            ...page,
+                                            items: page.items.map((item: AlbumArtist) => {
+                                                return itemIdSet.has(item.id)
+                                                    ? {
+                                                          ...item,
+                                                          userFavorite: isFavorite,
+                                                      }
+                                                    : item;
+                                            }),
+                                        };
+                                    }),
+                                };
+                            },
+                        );
+                    }
+                });
+            }
+
+            break;
+        }
+        case LibraryItem.ARTIST: {
+            const detailQueryKey = queryKeys.artists.detail(variables.apiClientProps.serverId);
+
+            const detailQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: detailQueryKey,
+            });
+
+            if (detailQueries.length) {
+                detailQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: AlbumArtistDetailResponse) => {
+                            if (prev && itemIdSet.has(prev.id)) {
+                                return {
+                                    ...prev,
+                                    userFavorite: isFavorite,
+                                };
+                            }
+
+                            return prev;
+                        });
+                    }
+                });
+            }
+
+            const listQueryKey = queryKeys.artists.list(variables.apiClientProps.serverId);
+
+            const listQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: listQueryKey,
+            });
+
+            if (listQueries.length) {
+                listQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: ArtistListResponse) => {
+                            return {
+                                ...prev,
+                                items: prev.items.map((item: Artist) => {
+                                    return itemIdSet.has(item.id)
+                                        ? { ...item, userFavorite: isFavorite }
+                                        : item;
+                                }),
+                            };
+                        });
+                    }
+                });
+            }
+
+            const infiniteListQueryKey = queryKeys.artists.infiniteList(
+                variables.apiClientProps.serverId,
+            );
+
+            const infiniteListQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: infiniteListQueryKey,
+            });
+
+            if (infiniteListQueries.length) {
+                infiniteListQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(
+                            queryKey,
+                            (prev: { pageParams: string[]; pages: ArtistListResponse[] }) => {
+                                return {
+                                    ...prev,
+                                    pages: prev.pages.map((page: ArtistListResponse) => {
+                                        return {
+                                            ...page,
+                                            items: page.items.map((item: Artist) => {
+                                                return itemIdSet.has(item.id)
+                                                    ? { ...item, userFavorite: isFavorite }
+                                                    : item;
+                                            }),
+                                        };
+                                    }),
+                                };
+                            },
+                        );
+                    }
+                });
+            }
+
+            break;
+        }
+        case LibraryItem.PLAYLIST_SONG:
+        case LibraryItem.QUEUE_SONG:
+        case LibraryItem.SONG: {
+            const albumDetailQueryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
+
+            const albumDetailQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: albumDetailQueryKey,
+            });
+
+            if (albumDetailQueries.length) {
+                albumDetailQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: AlbumDetailResponse) => {
+                            if (prev) {
+                                return {
+                                    ...prev,
+                                    songs: prev.songs?.map((song: Song) => {
+                                        return itemIdSet.has(song.id)
+                                            ? { ...song, userFavorite: isFavorite }
+                                            : song;
+                                    }),
+                                };
+                            }
+
+                            return prev;
+                        });
+                    }
+                });
+            }
+
+            const detailQueryKey = queryKeys.songs.detail(variables.apiClientProps.serverId);
+
+            const detailQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: detailQueryKey,
+            });
+
+            if (detailQueries.length) {
+                detailQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: SongDetailResponse) => {
+                            if (prev && itemIdSet.has(prev.id)) {
+                                return {
+                                    ...prev,
+                                    userFavorite: isFavorite,
+                                };
+                            }
+
+                            return prev;
+                        });
+                    }
+                });
+            }
+            break;
+        }
+    }
+
+    return previousQueries;
+};
+
+export const restoreFavoriteQueryData = (
+    queryClient: QueryClient,
+    previousQueries: PreviousQueryData[],
+): void => {
+    previousQueries.forEach(({ data, queryKey }) => {
+        queryClient.setQueryData(queryKey, data);
+    });
+};

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

@@ -0,0 +1,354 @@
+import { QueryClient } from '@tanstack/react-query';
+
+import { PreviousQueryData } from './favorite-optimistic-updates';
+
+import { queryKeys } from '/@/renderer/api/query-keys';
+import {
+    Album,
+    AlbumArtist,
+    AlbumArtistDetailResponse,
+    AlbumArtistListResponse,
+    AlbumDetailResponse,
+    AlbumListResponse,
+    Artist,
+    ArtistListResponse,
+    LibraryItem,
+    SetRatingArgs,
+    Song,
+    SongDetailResponse,
+} from '/@/shared/types/domain-types';
+
+export const applyRatingOptimisticUpdates = (
+    queryClient: QueryClient,
+    variables: SetRatingArgs,
+    rating: number,
+): PreviousQueryData[] => {
+    const previousQueries: PreviousQueryData[] = [];
+    const itemIdSet = new Set<string>();
+
+    if (Array.isArray(variables.query.id)) {
+        variables.query.id.forEach((id) => {
+            itemIdSet.add(id);
+        });
+    } else {
+        itemIdSet.add(variables.query.id);
+    }
+
+    switch (variables.query.type) {
+        case LibraryItem.ALBUM: {
+            const detailQueryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
+
+            const detailQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: detailQueryKey,
+            });
+
+            if (detailQueries.length) {
+                detailQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: AlbumDetailResponse) => {
+                            if (prev && itemIdSet.has(prev.id)) {
+                                return { ...prev, userRating: rating };
+                            }
+                            return prev;
+                        });
+                    }
+                });
+            }
+
+            const listQueryKey = queryKeys.albums.list(variables.apiClientProps.serverId);
+
+            const listQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: listQueryKey,
+            });
+
+            if (listQueries.length) {
+                listQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: AlbumListResponse) => {
+                            return {
+                                ...prev,
+                                items: prev.items.map((item: Album) => {
+                                    return itemIdSet.has(item.id)
+                                        ? { ...item, userRating: rating }
+                                        : item;
+                                }),
+                            };
+                        });
+                    }
+                });
+            }
+
+            const infiniteListQueryKey = queryKeys.albums.infiniteList(
+                variables.apiClientProps.serverId,
+            );
+
+            const infiniteListQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: infiniteListQueryKey,
+            });
+
+            if (infiniteListQueries.length) {
+                infiniteListQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(
+                            queryKey,
+                            (prev: { pageParams: string[]; pages: AlbumListResponse[] }) => {
+                                return {
+                                    ...prev,
+                                    pages: prev.pages.map((page: AlbumListResponse) => {
+                                        return {
+                                            ...page,
+                                            items: page.items.map((item: Album) => {
+                                                return itemIdSet.has(item.id)
+                                                    ? { ...item, userRating: rating }
+                                                    : item;
+                                            }),
+                                        };
+                                    }),
+                                };
+                            },
+                        );
+                    }
+                });
+            }
+
+            break;
+        }
+        case LibraryItem.ALBUM_ARTIST: {
+            const detailQueryKey = queryKeys.albumArtists.detail(variables.apiClientProps.serverId);
+
+            const detailQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: detailQueryKey,
+            });
+
+            if (detailQueries.length) {
+                detailQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: AlbumArtistDetailResponse) => {
+                            if (prev && itemIdSet.has(prev.id)) {
+                                return { ...prev, userRating: rating };
+                            }
+                            return prev;
+                        });
+                    }
+                });
+            }
+
+            const listQueryKey = queryKeys.albumArtists.list(variables.apiClientProps.serverId);
+
+            const listQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: listQueryKey,
+            });
+
+            if (listQueries.length) {
+                listQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: AlbumArtistListResponse) => {
+                            return {
+                                ...prev,
+                                items: prev.items.map((item: AlbumArtist) => {
+                                    return itemIdSet.has(item.id)
+                                        ? { ...item, userRating: rating }
+                                        : item;
+                                }),
+                            };
+                        });
+                    }
+                });
+            }
+
+            const infiniteListQueryKey = queryKeys.albumArtists.infiniteList(
+                variables.apiClientProps.serverId,
+            );
+            const infiniteListQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: infiniteListQueryKey,
+            });
+
+            if (infiniteListQueries.length) {
+                infiniteListQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(
+                            queryKey,
+                            (prev: { pageParams: string[]; pages: AlbumArtistListResponse[] }) => {
+                                return {
+                                    ...prev,
+                                    pages: prev.pages.map((page: AlbumArtistListResponse) => {
+                                        return {
+                                            ...page,
+                                            items: page.items.map((item: AlbumArtist) => {
+                                                return itemIdSet.has(item.id)
+                                                    ? { ...item, userRating: rating }
+                                                    : item;
+                                            }),
+                                        };
+                                    }),
+                                };
+                            },
+                        );
+                    }
+                });
+            }
+
+            break;
+        }
+        case LibraryItem.ARTIST: {
+            const detailQueryKey = queryKeys.artists.detail(variables.apiClientProps.serverId);
+
+            const detailQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: detailQueryKey,
+            });
+
+            if (detailQueries.length) {
+                detailQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: AlbumArtistDetailResponse) => {
+                            if (prev && itemIdSet.has(prev.id)) {
+                                return { ...prev, userRating: rating };
+                            }
+                            return prev;
+                        });
+                    }
+                });
+            }
+
+            const listQueryKey = queryKeys.artists.list(variables.apiClientProps.serverId);
+
+            const listQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: listQueryKey,
+            });
+
+            if (listQueries.length) {
+                listQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: ArtistListResponse) => {
+                            return {
+                                ...prev,
+                                items: prev.items.map((item: Artist) => {
+                                    return itemIdSet.has(item.id)
+                                        ? { ...item, userRating: rating }
+                                        : item;
+                                }),
+                            };
+                        });
+                    }
+                });
+            }
+
+            const infiniteListQueryKey = queryKeys.artists.infiniteList(
+                variables.apiClientProps.serverId,
+            );
+            const infiniteListQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: infiniteListQueryKey,
+            });
+
+            if (infiniteListQueries.length) {
+                infiniteListQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(
+                            queryKey,
+                            (prev: { pageParams: string[]; pages: ArtistListResponse[] }) => {
+                                return {
+                                    ...prev,
+                                    pages: prev.pages.map((page: ArtistListResponse) => {
+                                        return {
+                                            ...page,
+                                            items: page.items.map((item: Artist) => {
+                                                return itemIdSet.has(item.id)
+                                                    ? { ...item, userRating: rating }
+                                                    : item;
+                                            }),
+                                        };
+                                    }),
+                                };
+                            },
+                        );
+                    }
+                });
+            }
+
+            break;
+        }
+        case LibraryItem.PLAYLIST_SONG:
+        case LibraryItem.QUEUE_SONG:
+        case LibraryItem.SONG: {
+            const albumDetailQueryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
+
+            const albumDetailQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: albumDetailQueryKey,
+            });
+
+            if (albumDetailQueries.length) {
+                albumDetailQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: AlbumDetailResponse) => {
+                            if (prev) {
+                                return {
+                                    ...prev,
+                                    songs: prev.songs?.map((song: Song) => {
+                                        return itemIdSet.has(song.id)
+                                            ? { ...song, userRating: rating }
+                                            : song;
+                                    }),
+                                };
+                            }
+                            return prev;
+                        });
+                    }
+                });
+            }
+
+            const detailQueryKey = queryKeys.songs.detail(variables.apiClientProps.serverId);
+
+            const detailQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: detailQueryKey,
+            });
+
+            if (detailQueries.length) {
+                detailQueries.forEach(([queryKey, data]) => {
+                    if (data) {
+                        previousQueries.push({ data, queryKey });
+                        queryClient.setQueryData(queryKey, (prev: SongDetailResponse) => {
+                            if (prev && itemIdSet.has(prev.id)) {
+                                return { ...prev, userRating: rating };
+                            }
+                            return prev;
+                        });
+                    }
+                });
+            }
+
+            break;
+        }
+    }
+
+    return previousQueries;
+};
+
+export const restoreRatingQueryData = (
+    queryClient: QueryClient,
+    previousQueries: PreviousQueryData[],
+): void => {
+    previousQueries.forEach(({ data, queryKey }) => {
+        queryClient.setQueryData(queryKey, data);
+    });
+};

src/renderer/features/shared/mutations/set-rating-mutation.ts

@@ -1,37 +1,49 @@
 import { useIsMutating, useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
+import { useTranslation } from 'react-i18next';
 
 import { api } from '/@/renderer/api';
-import { queryKeys } from '/@/renderer/api/query-keys';
 import { eventEmitter } from '/@/renderer/events/event-emitter';
+import { PreviousQueryData } from '/@/renderer/features/shared/mutations/favorite-optimistic-updates';
+import {
+    applyRatingOptimisticUpdates,
+    restoreRatingQueryData,
+} from '/@/renderer/features/shared/mutations/rating-optimistic-updates';
 import { MutationHookArgs } from '/@/renderer/lib/react-query';
-import { LibraryItem, RatingResponse, SetRatingArgs } from '/@/shared/types/domain-types';
+import { toast } from '/@/shared/components/toast/toast';
+import { RatingResponse, SetRatingArgs } from '/@/shared/types/domain-types';
 
-const setRatingQueryKey = ['set-rating'];
+const setRatingMutationKey = ['set-rating'];
 
 export const useSetRating = (args: MutationHookArgs) => {
     const { options } = args || {};
     const queryClient = useQueryClient();
+    const { t } = useTranslation();
 
-    return useMutation<
+    return useMutation<RatingResponse, AxiosError, SetRatingArgs, PreviousQueryData[]>({
-        RatingResponse,
-        AxiosError,
-        SetRatingArgs,
-        { previous: undefined | { id: string[]; rating: number; type: LibraryItem } }
-    >({
         mutationFn: (args) => {
             return api.controller.setRating({
                 ...args,
                 apiClientProps: { serverId: args.apiClientProps.serverId },
             });
         },
-        mutationKey: setRatingQueryKey,
+        mutationKey: setRatingMutationKey,
-        onError: (_error, variables) => {
+        onError: (_error, _variables, context) => {
+            if (context) {
+                restoreRatingQueryData(queryClient, context);
+            }
+
+            toast.show({
+                message: _error.message,
+                title: t('error.genericError', { postProcess: 'sentenceCase' }) as string,
+                type: 'error',
+            });
+
             eventEmitter.emit('USER_RATING', {
-                id: variables.query.id,
+                id: _variables.query.id,
-                itemType: variables.query.type,
+                itemType: _variables.query.type,
-                rating: variables.query.rating,
+                rating: _variables.query.rating,
-                serverId: variables.apiClientProps.serverId,
+                serverId: _variables.apiClientProps.serverId,
             });
         },
         onMutate: (variables) => {
@@ -42,71 +54,13 @@ export const useSetRating = (args: MutationHookArgs) => {
                 serverId: variables.apiClientProps.serverId,
             });
 
-            return { previous: undefined };
+            return applyRatingOptimisticUpdates(queryClient, variables, variables.query.rating);
-        },
-        onSuccess: (_data, variables) => {
-            switch (variables.query.type) {
-                case LibraryItem.ALBUM: {
-                    const queryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey,
-                    });
-
-                    break;
-                }
-                case LibraryItem.ALBUM_ARTIST: {
-                    const queryKey = queryKeys.albumArtists.detail(
-                        variables.apiClientProps.serverId,
-                    );
-
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey,
-                    });
-
-                    break;
-                }
-                case LibraryItem.ARTIST: {
-                    const queryKey = queryKeys.artists.detail(variables.apiClientProps.serverId);
-
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey,
-                    });
-
-                    break;
-                }
-                case LibraryItem.PLAYLIST_SONG:
-                case LibraryItem.QUEUE_SONG:
-                case LibraryItem.SONG: {
-                    const songDetailQueryKey = queryKeys.songs.detail(
-                        variables.apiClientProps.serverId,
-                    );
-
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey: songDetailQueryKey,
-                    });
-
-                    const albumDetailQueryKey = queryKeys.albums.detail(
-                        variables.apiClientProps.serverId,
-                    );
-
-                    queryClient.invalidateQueries({
-                        exact: false,
-                        queryKey: albumDetailQueryKey,
-                    });
-
-                    break;
-                }
-            }
         },
         ...options,
     });
 };
 
 export const useIsMutatingRating = () => {
-    const mutatingCount = useIsMutating({ mutationKey: setRatingQueryKey });
+    const mutatingCount = useIsMutating({ mutationKey: setRatingMutationKey });
     return mutatingCount > 0;
 };

src/renderer/store/event.store.ts

@@ -1,71 +0,0 @@
-import { devtools, subscribeWithSelector } from 'zustand/middleware';
-import { immer } from 'zustand/middleware/immer';
-import { createWithEqualityFn } from 'zustand/traditional';
-
-export interface EventSlice extends EventState {
-    actions: {
-        favorite: (ids: string[], favorite: boolean) => void;
-        play: (id: string) => void;
-        rate: (ids: string[], rating: null | number) => void;
-    };
-}
-
-export interface EventState {
-    event: null | UserEvent;
-    ids: string[];
-}
-
-export type FavoriteEvent = {
-    event: 'favorite';
-    favorite: boolean;
-};
-
-export type PlayEvent = {
-    event: 'play';
-    timestamp: string;
-};
-
-export type RatingEvent = {
-    event: 'rating';
-    rating: null | number;
-};
-
-export type UserEvent = FavoriteEvent | PlayEvent | RatingEvent;
-
-export const useEventStore = createWithEqualityFn<EventSlice>()(
-    subscribeWithSelector(
-        devtools(
-            immer((set) => ({
-                actions: {
-                    favorite(ids, favorite) {
-                        set((state) => {
-                            state.event = { event: 'favorite', favorite };
-                            state.ids = ids;
-                        });
-                    },
-                    play(id) {
-                        set((state) => {
-                            state.event = { event: 'play', timestamp: new Date().toISOString() };
-                            state.ids = [id];
-                        });
-                    },
-                    rate(ids, rating) {
-                        set((state) => {
-                            state.event = { event: 'rating', rating };
-                            state.ids = ids;
-                        });
-                    },
-                },
-                event: null,
-                ids: [],
-            })),
-            { name: 'event_store' },
-        ),
-    ),
-);
-
-export const useFavoriteEvent = () => useEventStore((state) => state.actions.favorite);
-
-export const usePlayEvent = () => useEventStore((state) => state.actions.play);
-
-export const useRatingEvent = () => useEventStore((state) => state.actions.rate);

src/renderer/themes/mantine-theme.tsx

@@ -1,9 +1,10 @@
 import type { MantineColorsTuple, MantineThemeOverride } from '@mantine/core';
 
 import { generateColors } from '@mantine/colors-generator';
-import { createTheme, rem } from '@mantine/core';
+import { createTheme, Loader, rem } from '@mantine/core';
 import merge from 'lodash/merge';
 
+import { Spinner } from '/@/shared/components/spinner/spinner';
 import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
 
 // const lightColors: MantineColorsTuple = [
@@ -43,6 +44,14 @@ const mantineTheme: MantineThemeOverride = createTheme({
         xl: '88em',
         xs: '36em',
     },
+    components: {
+        Loader: Loader.extend({
+            defaultProps: {
+                loaders: { ...Loader.defaultLoaders, spinner: Spinner as any },
+                type: 'spinner',
+            },
+        }),
+    },
     cursorType: 'pointer',
     defaultRadius: 'sm',
     focusRing: 'never',

src/shared/components/action-icon/action-icon.module.css

@@ -75,6 +75,10 @@
                 background: darken(var(--theme-colors-background), 5%);
             }
         }
+
+        &[data-disabled='true'] {
+            background: transparent;
+        }
     }
 
     &[data-variant='secondary'] {

src/shared/types/domain-types.ts

@@ -766,7 +766,7 @@ export interface ArtistListQuery extends BaseQuery<ArtistListSort> {
 }
 
 // Artist List
-export type ArtistListResponse = BasePaginatedResponse<AlbumArtist[]>;
+export type ArtistListResponse = BasePaginatedResponse<Artist[]>;
 
 type ArtistListSortMap = {
     jellyfin: Record<ArtistListSort, JFArtistListSort | undefined>;