uiux(Contacts): add loading indicator when searching for contacts to add

src/app/profile/view.nim

@@ -9,6 +9,7 @@ import ../../status/status
 import ../../status/devices as status_devices
 import ../../status/ens as status_ens
 import ../../status/chat/chat
+import ../../status/threads
 import ../../status/libstatus/types
 import ../../status/libstatus/accounts/constants as accountConstants
 import qrcode/qrcode
@@ -256,11 +257,13 @@ QtObject:
     if value == "":
       return
 
-    var id = value
-
-    if not id.startsWith("0x"):
-      id = status_ens.pubkey(id)
+    spawnAndSend(self, "ensResolved") do: # Call self.ensResolved(string) when ens is resolved
+      var id = value
+      if not id.startsWith("0x"):
+        id = status_ens.pubkey(id)
+      id
 
+  proc ensResolved(self: ProfileView, id: string) {.slot.} =
     let contact = self.status.contacts.getContactByID(id)
 
     if contact != nil:
@@ -273,7 +276,7 @@ QtObject:
         ensVerified: false
       )
     self.contactToAddChanged()
-
+  
   proc addContact*(self: ProfileView, pk: string) {.slot.} =
     discard self.status.contacts.addContact(pk)
 

ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml

@@ -10,6 +10,7 @@ Item {
     id: contactsContainer
     Layout.fillHeight: true
     property alias searchStr: searchBox.text
+    property bool isPending: false
 
     SearchBox {
         id: searchBox
@@ -103,11 +104,30 @@ Item {
         }
     }
 
+    Connections {
+        target: profileModel
+        onContactToAddChanged: {
+            contactsContainer.isPending = false
+        }
+    }
+
+    Component {
+        id: loadingIndicator
+        LoadingImage {
+            width: 12
+            height: 12
+        }
+    }
+
     ModalPopup {
         id: addContactModal
         //% "Add contact"
         title: qsTrId("add-contact")
 
+        property var lookupContact: Backpressure.debounce(addContactSearchInput, 400, function (value) {
+            profileModel.lookupContact(value)
+        })
+
         Input {
             id: addContactSearchInput
             //% "Enter ENS username or chat key"
@@ -115,8 +135,26 @@ Item {
             customHeight: 44
             fontPixelSize: 15
             onEditingFinished: {
-              profileModel.lookupContact(inputValue)
+                contactsContainer.isPending = true
+                profileModel.lookupContact(inputValue)
+                contactsContainer.isPending = false
             }
+            onTextChanged: {
+                if (addContactSearchInput.text !== "") {
+                  contactsContainer.isPending = true
+                }
+            }
+            Keys.onReleased: {
+                Qt.callLater(addContactModal.lookupContact, addContactSearchInput.text)
+            }
+        }
+
+        Loader {
+            sourceComponent: loadingIndicator
+            anchors.top: addContactSearchInput.bottom
+            anchors.topMargin: Style.current.padding
+            anchors.horizontalCenter: parent.horizontalCenter
+            active: contactsContainer.isPending
         }
 
         Item {
@@ -126,7 +164,18 @@ Item {
           anchors.horizontalCenter: parent.horizontalCenter
           height: contactUsername.height
           width: contactUsername.width + contactPubKey.width
-          visible: profileModel.contactToAddPubKey !== ""
+          visible: !contactsContainer.isPending && !!addContactSearchInput.text
+
+
+          StyledText {
+              anchors.top: addContactSearchInput.bottom
+              anchors.topMargin: Style.current.padding
+              anchors.horizontalCenter: parent.horizontalCenter
+              font.pixelSize: 12
+              color: Style.current.darkGrey
+              text: qsTr("User not found")
+              visible: !contactsContainer.isPending && !!!profileModel.contactToAddUsername
+          }
 
           StyledText {
               id: contactUsername
@@ -135,6 +184,7 @@ Item {
               anchors.topMargin: Style.current.padding
               font.pixelSize: 12
               color: Style.current.darkGrey
+              visible: !!profileModel.contactToAddPubKey
           }
 
           StyledText {
@@ -145,6 +195,7 @@ Item {
               font.pixelSize: 12
               elide: Text.ElideMiddle
               color: Style.current.darkGrey
+              visible: !!profileModel.contactToAddPubKey
           }
 
         }