fix: prevent flashing of search results during input (#7592)

solves #7511

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Vardhaman Bhandari
2024-10-14 11:59:54 +05:30
committed by GitHub
parent 653085f1e6
commit 1a57dd654f
2 changed files with 89 additions and 131 deletions

View File

@ -1,6 +1,3 @@
import { useQuery, WatchQueryFetchPolicy } from '@apollo/client';
import { useRecoilValue } from 'recoil';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { ObjectMetadataItemIdentifier } from '@/object-metadata/types/ObjectMetadataItemIdentifier';
@ -13,7 +10,9 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { getSearchRecordsQueryResponseField } from '@/object-record/utils/getSearchRecordsQueryResponseField';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useQuery, WatchQueryFetchPolicy } from '@apollo/client';
import { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import { logError } from '~/utils/logError';
export type UseSearchRecordsParams = ObjectMetadataItemIdentifier &
@ -43,10 +42,8 @@ export const useSearchRecords = <T extends ObjectRecord = ObjectRecord>({
});
const { enqueueSnackBar } = useSnackBar();
const { data, loading, error } = useQuery<RecordGqlOperationSearchResult>(
searchRecordsQuery,
{
const { data, loading, error, previousData } =
useQuery<RecordGqlOperationSearchResult>(searchRecordsQuery, {
skip:
skip || !objectMetadataItem || !currentWorkspaceMember || !searchInput,
variables: {
@ -66,14 +63,15 @@ export const useSearchRecords = <T extends ObjectRecord = ObjectRecord>({
},
);
},
},
);
});
const effectiveData = loading ? previousData : data;
const queryResponseField = getSearchRecordsQueryResponseField(
objectMetadataItem.namePlural,
);
const result = data?.[queryResponseField];
const result = effectiveData?.[queryResponseField];
const records = useMemo(
() =>