Improve usability of search on web (#3663)

* dont select the text on web

* TODO REVERT THESE CHANGES

* use `usethrottledvalue` for autocomplete

* use `isFetching` from query

* rm setTimeout

* getting there

* improve functionality of cancel button

* rm todo

* add comment back

* encode `searchText` rather than `queryTerm`

* use "back" on web in some cases

* don't flash results in autocomplete

* remove unnecesary usestate

* rename everything to `query` temporarily

* revert accidental lint

* rm todo

* rm comment

* use `useFocusEffect` to update the query term on back navigation

* `searchText` is always defined here

* Fix race

* remove back functionality

* use `keepPreviousData` for query

* rename `q` to `queryParam`

* remove hack

* remove `q=` on cancel

* blur on submit

* use `setParams` instead of `replace`

* use `replace` on web still

* clear the search input when we clear `q` on native

* onPress dismiss attempt

* Adjustments

* Fix search history

* Always hide autocomplete

* Clear right pane search on select

* `blur` on autosuggestion press

* Rename to reduce diff

* Fixes

* Unify codepaths

* Fixes

* precache the autosuggestion

* do the cache in the link card

* Revert "precache the autosuggestion"

This reverts commit 79c433e984.

* use `throttledValue` and `keepPreviousData` in sidebar search

* show spinner when fetching pt 1

* show spinner when fetching pt 2

* show spinner properly for autocomplete

* Fix extra border

* Position fixed

* TS

* Revert "TS"

This reverts commit df187ea2d7.

* Revert "Position fixed"

This reverts commit 9c721c952b.

* Maybe fix iPad

* Revert "TODO REVERT THESE CHANGES"

This reverts commit 279f717f30.

* Rename var

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

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