Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 09:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: Improve optimistic updates in favorites mutation handling

Browse source
This commit is contained in:
Marco Beretta 2025-12-03 00:19:45 +01:00
parent 84e1a41760
commit 1ed0ae9de4
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
2 changed files with 35 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/src/data-provider/Favorites.ts
View file

@ -24,8 +24,20 @@ export const useUpdateFavoritesMutation = () => {
(favorites: FavoritesState) =>
dataService.updateFavorites(favorites) as Promise<FavoritesState>,
{
onSuccess: (data) => {
queryClient.setQueryData(['favorites'], data);
// Optimistic update to prevent UI flickering when toggling favorites
// Sets query cache immediately before the request completes
onMutate: async (newFavorites) => {
await queryClient.cancelQueries(['favorites']);
const previousFavorites = queryClient.getQueryData<FavoritesState>(['favorites']);
queryClient.setQueryData(['favorites'], newFavorites);
return { previousFavorites };
},
onError: (_err, _newFavorites, context) => {
if (context?.previousFavorites) {
queryClient.setQueryData(['favorites'], context.previousFavorites);
}
},
},
);

23
client/src/hooks/useFavorites.ts
View file

@ -1,4 +1,4 @@
import { useEffect, useCallback } from 'react';
import { useEffect, useCallback, useRef } from 'react';
import { useAtom } from 'jotai';
import { useToastContext } from '@librechat/client';
import type { Favorite } from '~/store/favorites';
@ -44,7 +44,14 @@ export default function useFavorites() {
const getFavoritesQuery = useGetFavoritesQuery();
const updateFavoritesMutation = useUpdateFavoritesMutation();
const isMutatingRef = useRef(false);
useEffect(() => {
// Skip updating local state if a mutation is in progress or just completed
// The local state is already optimistically updated by saveFavorites
if (isMutatingRef.current || updateFavoritesMutation.isLoading) {
return;
}
if (getFavoritesQuery.data) {
if (Array.isArray(getFavoritesQuery.data)) {
setFavorites(getFavoritesQuery.data);
@ -52,12 +59,13 @@ export default function useFavorites() {
setFavorites([]);
}
}
}, [getFavoritesQuery.data, setFavorites]);
}, [getFavoritesQuery.data, setFavorites, updateFavoritesMutation.isLoading]);
const saveFavorites = useCallback(
async (newFavorites: typeof favorites) => {
const cleaned = cleanFavorites(newFavorites);
setFavorites(cleaned);
isMutatingRef.current = true;
try {
await updateFavoritesMutation.mutateAsync(cleaned);
} catch (error) {
@ -65,6 +73,12 @@ export default function useFavorites() {
showToast({ message: localize('com_ui_error'), status: 'error' });
// Refetch to resync state with server
getFavoritesQuery.refetch();
} finally {
// Use a small delay to prevent the useEffect from triggering immediately
// after the mutation completes but before React has finished processing
setTimeout(() => {
isMutatingRef.current = false;
}, 100);
}
},
[setFavorites, updateFavoritesMutation, showToast, localize, getFavoritesQuery],
@ -129,6 +143,7 @@ export default function useFavorites() {
const cleaned = cleanFavorites(newFavorites);
setFavorites(cleaned);
if (persist) {
isMutatingRef.current = true;
try {
await updateFavoritesMutation.mutateAsync(cleaned);
} catch (error) {
@ -136,6 +151,10 @@ export default function useFavorites() {
showToast({ message: localize('com_ui_error'), status: 'error' });
// Refetch to resync state with server
getFavoritesQuery.refetch();
} finally {
setTimeout(() => {
isMutatingRef.current = false;
}, 100);
}
}
},