ListAddUser modal UX improvements (#1809)

* typo

* Add loading state to ListAddUser

* Improve UI/UX of ListAddUser

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'

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

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({
     <SafeAreaView
       testID="listAddUserModal"
       style={[pal.view, isWeb ? styles.fixedHeight : s.flex1]}>
-      <View
+      <View style={[s.flex1, isMobile && {paddingHorizontal: 18}]}>
-        style={[
-          s.flex1,
-          isMobile && {paddingHorizontal: 18, paddingBottom: 40},
-        ]}>
-        <View style={styles.titleSection}>
-          <Text type="title-lg" style={[pal.text, styles.title]}>
-            Add User to List
-          </Text>
-        </View>
         <View style={[styles.searchContainer, pal.border]}>
           <FontAwesomeIcon icon="search" size={16} />
           <TextInput
@@ -91,9 +85,11 @@ export const Component = observer(function Component({
             accessible={true}
             accessibilityLabel="Search"
             accessibilityHint=""
+            autoFocus
             autoCapitalize="none"
             autoComplete="off"
             autoCorrect={false}
+            selectTextOnFocus
           />
           {query ? (
             <Pressable
@@ -101,7 +97,8 @@ export const Component = observer(function Component({
               accessibilityRole="button"
               accessibilityLabel="Cancel search"
               accessibilityHint="Exits inputting search query"
-              onAccessibilityEscape={onPressCancelSearch}>
+              onAccessibilityEscape={onPressCancelSearch}
+              hitSlop={HITSLOP_20}>
               <FontAwesomeIcon
                 icon="xmark"
                 size={16}
@@ -110,8 +107,15 @@ export const Component = observer(function Component({
             </Pressable>
           ) : undefined}
         </View>
-        <ScrollView style={[s.flex1]}>
+        <ScrollView
-          {autocompleteView.suggestions.length ? (
+          style={[s.flex1]}
+          keyboardDismissMode="none"
+          keyboardShouldPersistTaps="always">
+          {autocompleteView.isLoading ? (
+            <View style={{marginVertical: 20}}>
+              <ActivityIndicator />
+            </View>
+          ) : autocompleteView.suggestions.length ? (
             <>
               {autocompleteView.suggestions.slice(0, 40).map((item, i) => (
                 <UserResult
@@ -134,10 +138,14 @@ export const Component = observer(function Component({
             </Text>
           )}
         </ScrollView>
-        <View style={[styles.btnContainer]}>
+        <View
+          style={[
+            styles.btnContainer,
+            {paddingBottom: isKeyboardVisible ? 10 : 20},
+          ]}>
           <Button
             testID="doneBtn"
-            type="primary"
+            type="default"
             onPress={() => store.shell.closeModal()}
             accessibilityLabel="Done"
             accessibilityHint=""
@@ -188,16 +196,13 @@ function UserResult({
           flexDirection: 'row',
           alignItems: 'center',
           borderTopWidth: noBorder ? 0 : 1,
-          paddingVertical: 8,
           paddingHorizontal: 8,
         },
       ]}>
       <View
         style={{
-          alignSelf: 'baseline',
           width: 54,
           paddingLeft: 4,
-          paddingTop: 10,
         }}>
         <UserAvatar size={40} avatar={profile.avatar} />
       </View>
@@ -276,6 +281,6 @@ const styles = StyleSheet.create({
     backgroundColor: colors.blue3,
   },
   btnContainer: {
-    paddingTop: 20,
+    paddingTop: 10,
   },
 })