don't flash results in autocomplete
This commit is contained in:
@@ -28,7 +28,7 @@ import {s} from '#/lib/styles'
|
|||||||
import {logger} from '#/logger'
|
import {logger} from '#/logger'
|
||||||
import {isNative, isWeb} from '#/platform/detection'
|
import {isNative, isWeb} from '#/platform/detection'
|
||||||
import {listenSoftReset} from '#/state/events'
|
import {listenSoftReset} from '#/state/events'
|
||||||
import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
|
import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete'
|
||||||
import {useActorSearch} from '#/state/queries/actor-search'
|
import {useActorSearch} from '#/state/queries/actor-search'
|
||||||
import {useModerationOpts} from '#/state/queries/preferences'
|
import {useModerationOpts} from '#/state/queries/preferences'
|
||||||
import {useSearchPostsQuery} from '#/state/queries/search-posts'
|
import {useSearchPostsQuery} from '#/state/queries/search-posts'
|
||||||
@@ -550,8 +550,10 @@ export function SearchScreen(
|
|||||||
const [searchText, setSearchText] = React.useState<string>(q)
|
const [searchText, setSearchText] = React.useState<string>(q)
|
||||||
const throttledInput = useThrottledValue(searchText, 300)
|
const throttledInput = useThrottledValue(searchText, 300)
|
||||||
|
|
||||||
const {data: autocompleteData, isFetching: isAutocompleteFetching} =
|
// Autocomplete
|
||||||
useActorAutocompleteQuery(throttledInput)
|
const search = useActorAutocompleteFn()
|
||||||
|
const [autocompleteData, setAutocompleteData] =
|
||||||
|
React.useState<AppBskyActorDefs.ProfileViewBasic[]>()
|
||||||
|
|
||||||
const [inputIsFocused, setInputIsFocused] = React.useState(false)
|
const [inputIsFocused, setInputIsFocused] = React.useState(false)
|
||||||
const [showAutocompleteResults, setShowAutocompleteResults] =
|
const [showAutocompleteResults, setShowAutocompleteResults] =
|
||||||
@@ -578,6 +580,16 @@ export function SearchScreen(
|
|||||||
loadSearchHistory()
|
loadSearchHistory()
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!throttledInput) {
|
||||||
|
setAutocompleteData(undefined)
|
||||||
|
} else {
|
||||||
|
search({query: throttledInput}).then(res => {
|
||||||
|
setAutocompleteData(res)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [search, throttledInput])
|
||||||
|
|
||||||
const onPressMenu = React.useCallback(() => {
|
const onPressMenu = React.useCallback(() => {
|
||||||
track('ViewHeader:MenuButtonClicked')
|
track('ViewHeader:MenuButtonClicked')
|
||||||
setDrawerOpen(true)
|
setDrawerOpen(true)
|
||||||
@@ -786,7 +798,7 @@ export function SearchScreen(
|
|||||||
{showAutocompleteResults ? (
|
{showAutocompleteResults ? (
|
||||||
<>
|
<>
|
||||||
{/* TODO avoid showing spinner if we have any previous results -hailey */}
|
{/* TODO avoid showing spinner if we have any previous results -hailey */}
|
||||||
{(isAutocompleteFetching && !autocompleteData) || !moderationOpts ? (
|
{(searchText && !autocompleteData) || !moderationOpts ? (
|
||||||
<Loader />
|
<Loader />
|
||||||
) : (
|
) : (
|
||||||
<ScrollView
|
<ScrollView
|
||||||
|
|||||||
Reference in New Issue
Block a user