diff --git a/src/state/queries/actor-autocomplete.ts b/src/state/queries/actor-autocomplete.ts index 0b022dd497..98b5aa17e6 100644 --- a/src/state/queries/actor-autocomplete.ts +++ b/src/state/queries/actor-autocomplete.ts @@ -1,6 +1,6 @@ import React from 'react' import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api' -import {useQuery, useQueryClient} from '@tanstack/react-query' +import {keepPreviousData, useQuery, useQueryClient} from '@tanstack/react-query' import {isJustAMute} from '#/lib/moderation' import {logger} from '#/logger' @@ -16,7 +16,10 @@ const DEFAULT_MOD_OPTS = { const RQKEY_ROOT = 'actor-autocomplete' export const RQKEY = (prefix: string) => [RQKEY_ROOT, prefix] -export function useActorAutocompleteQuery(prefix: string) { +export function useActorAutocompleteQuery( + prefix: string, + maintainData?: boolean, +) { const moderationOpts = useModerationOpts() const {getAgent} = useAgent() @@ -40,6 +43,7 @@ export function useActorAutocompleteQuery(prefix: string) { }, [moderationOpts], ), + placeholderData: maintainData ? keepPreviousData : undefined, }) } diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index eca2e0a445..aeeb411519 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -27,7 +27,7 @@ import {s} from '#/lib/styles' import {logger} from '#/logger' import {isNative, isWeb} from '#/platform/detection' import {listenSoftReset} from '#/state/events' -import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' +import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' import {useActorSearch} from '#/state/queries/actor-search' import {useModerationOpts} from '#/state/queries/preferences' import {useSearchPostsQuery} from '#/state/queries/search-posts' @@ -489,9 +489,10 @@ export function SearchScreen( const throttledInput = useThrottledValue(searchText, 300) // Autocomplete - const search = useActorAutocompleteFn() - const [autocompleteData, setAutocompleteData] = - React.useState() + const {data: autocompleteData} = useActorAutocompleteQuery( + throttledInput, + true, + ) const [inputIsFocused, setInputIsFocused] = React.useState(false) const [searchHistory, setSearchHistory] = React.useState([]) @@ -517,22 +518,6 @@ export function SearchScreen( loadSearchHistory() }, []) - React.useEffect(() => { - let ignore = false - if (!throttledInput) { - setAutocompleteData(undefined) - } else { - search({query: throttledInput}).then(res => { - if (!ignore) { - setAutocompleteData(res) - } - }) - } - return () => { - ignore = true - } - }, [search, throttledInput]) - const onPressMenu = React.useCallback(() => { track('ViewHeader:MenuButtonClicked') setDrawerOpen(true)