diff --git a/src/features/gifPicker/GifPickerDialog.tsx b/src/features/gifPicker/GifPickerDialog.tsx index b5fd0f4a2e..bdcf3ca86f 100644 --- a/src/features/gifPicker/GifPickerDialog.tsx +++ b/src/features/gifPicker/GifPickerDialog.tsx @@ -75,12 +75,18 @@ function GifPickerBody({ const {getRecents, addRecent, hasRecents} = useRecentGifs() // Determine the effective search query: - // - If user is typing, use the typed text + // - If user is typing, use the throttled text + // - If user clears the input, immediately drop the search (don't wait for + // the throttle to catch up — otherwise the previous query keeps driving + // the visible results until the next interval tick) // - If a non-trending category is active, use its searchterm // - Otherwise (trending/recents), empty string triggers the featured endpoint const activeCategorySearchterm = GIF_CATEGORIES.find(c => c.id === activeCategory)?.searchterm ?? '' - const effectiveSearch = search.length > 0 ? search : activeCategorySearchterm + const effectiveSearch = + rawSearch.length > 0 && search.length > 0 + ? search + : activeCategorySearchterm const isRecentsActive = activeCategory === 'recents' && rawSearch.length === 0 @@ -96,7 +102,9 @@ function GifPickerBody({ refetch, } = useGifPickerData(effectiveSearch, {enabled: !isRecentsActive}) - const networkItems = data?.pages.flatMap(page => page.results) ?? [] + const networkItems = dedupeById( + data?.pages.flatMap(page => page.results) ?? [], + ) const items = isRecentsActive ? getRecents() : networkItems const hasData = items.length > 0 @@ -184,3 +192,14 @@ function GifPickerBody({ ) } + +function dedupeById(items: Gif[]): Gif[] { + const seen = new Set() + const out: Gif[] = [] + for (const item of items) { + if (seen.has(item.id)) continue + seen.add(item.id) + out.push(item) + } + return out +} diff --git a/src/features/gifPicker/queries.ts b/src/features/gifPicker/queries.ts index c68e3cc405..b8055fc8eb 100644 --- a/src/features/gifPicker/queries.ts +++ b/src/features/gifPicker/queries.ts @@ -1,6 +1,6 @@ import {Platform} from 'react-native' import {getLocales} from 'expo-localization' -import {keepPreviousData, useInfiniteQuery} from '@tanstack/react-query' +import {useInfiniteQuery} from '@tanstack/react-query' import {GIF_KLIPY_FEATURED, GIF_KLIPY_SEARCH} from '#/lib/constants' import {type Gif} from '#/features/gifPicker/types' @@ -32,7 +32,6 @@ export function useGifSearchQuery( initialPageParam: undefined as string | undefined, getNextPageParam: lastPage => lastPage.next, enabled: !!query && options?.enabled !== false, - placeholderData: keepPreviousData, }) }