diff --git a/src/lib/hooks/useIsKeyboardVisible.ts b/src/lib/hooks/useIsKeyboardVisible.ts index 5b2a86eb..38fc80bd 100644 --- a/src/lib/hooks/useIsKeyboardVisible.ts +++ b/src/lib/hooks/useIsKeyboardVisible.ts @@ -10,7 +10,7 @@ export function useIsKeyboardVisible({ const [isKeyboardVisible, setKeyboardVisible] = useState(false) // NOTE - // only iOS suppose the "will" events + // only iOS supports the "will" events // -prf const showEvent = isIOS && iosUseWillEvents ? 'keyboardWillShow' : 'keyboardDidShow' diff --git a/src/state/models/discovery/user-autocomplete.ts b/src/state/models/discovery/user-autocomplete.ts index 25ce859d..f28869e8 100644 --- a/src/state/models/discovery/user-autocomplete.ts +++ b/src/state/models/discovery/user-autocomplete.ts @@ -48,6 +48,7 @@ export class UserAutocompleteModel { // = async setup() { + this.isLoading = true await this.rootStore.me.follows.syncIfNeeded() runInAction(() => { for (const did in this.rootStore.me.follows.byDid) { @@ -56,6 +57,7 @@ export class UserAutocompleteModel { this.knownHandles.add(info.handle) } } + this.isLoading = false }) } diff --git a/src/view/com/modals/ListAddUser.tsx b/src/view/com/modals/ListAddUser.tsx index 6ee20ff1..a04e2d18 100644 --- a/src/view/com/modals/ListAddUser.tsx +++ b/src/view/com/modals/ListAddUser.tsx @@ -21,9 +21,11 @@ import {s, colors} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' import {isWeb} from 'platform/detection' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' import {cleanError} from 'lib/strings/errors' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' +import {HITSLOP_20} from '#/lib/constants' export const snapPoints = ['90%'] @@ -42,6 +44,7 @@ export const Component = observer(function Component({ () => new UserAutocompleteModel(store), [store], ) + const [isKeyboardVisible] = useIsKeyboardVisible() // initial setup useEffect(() => { @@ -69,16 +72,7 @@ export const Component = observer(function Component({ - - - - Add User to List - - + {query ? ( + onAccessibilityEscape={onPressCancelSearch} + hitSlop={HITSLOP_20}> ) : undefined} - - {autocompleteView.suggestions.length ? ( + + {autocompleteView.isLoading ? ( + + + + ) : autocompleteView.suggestions.length ? ( <> {autocompleteView.suggestions.slice(0, 40).map((item, i) => ( )} - +