add optimistic update for favorite/ratings mutations

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}
                 />