use keepPreviousData for query

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,
   })
 }
 

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<AppBskyActorDefs.ProfileViewBasic[]>()
+  const {data: autocompleteData} = useActorAutocompleteQuery(
+    throttledInput,
+    true,
+  )
 
   const [inputIsFocused, setInputIsFocused] = React.useState(false)
   const [searchHistory, setSearchHistory] = React.useState<string[]>([])
@@ -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)