From a0838c87cde6c9fb26e030815db447c39bb37181 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 11 Jan 2018 21:26:25 -0600
Subject: [PATCH 1/3] fix(contacts-form): if there is an @ in the search we
 assume they are pasting pubkey@host format and ignore the host, searching
 only for the pubkey to the left of the @

---
 app/reducers/contactsform.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/reducers/contactsform.js b/app/reducers/contactsform.js
index a1f48a58..4b940db7 100644
--- a/app/reducers/contactsform.js
+++ b/app/reducers/contactsform.js
@@ -70,7 +70,11 @@ const searchQuerySelector = state => state.contactsform.searchQuery
 contactFormSelectors.filteredNetworkNodes = createSelector(
   networkNodesSelector,
   searchQuerySelector,
-  (nodes, searchQuery) => filter(nodes, node => node.alias.includes(searchQuery) || node.pub_key.includes(searchQuery))
+  (nodes, searchQuery) => {
+    const query = searchQuery.includes('@') ? searchQuery.split('@')[0] : searchQuery
+
+    return filter(nodes, node => node.alias.includes(query) || node.pub_key.includes(query))
+  }
 )
 
 contactFormSelectors.showManualForm = createSelector(

From ec0a692983be9c80dbdde143aa3d9c6df8e08c25 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 11 Jan 2018 21:40:42 -0600
Subject: [PATCH 2/3] fix(contacts-form): by default show the first 20 nodes
 when opening the contacts form

---
 app/components/Contacts/ContactsForm.js | 2 +-
 app/reducers/contactsform.js            | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js
index 049aa246..4a33af26 100644
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -138,7 +138,7 @@ class ContactsForm extends React.Component {
 
             <ul className={styles.networkResults}>
               {
-                contactsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => (
+                filteredNetworkNodes.map(node => (
                   <li key={node.pub_key}>
                     <section>
                       {
diff --git a/app/reducers/contactsform.js b/app/reducers/contactsform.js
index 4b940db7..40e2a777 100644
--- a/app/reducers/contactsform.js
+++ b/app/reducers/contactsform.js
@@ -71,6 +71,12 @@ contactFormSelectors.filteredNetworkNodes = createSelector(
   networkNodesSelector,
   searchQuerySelector,
   (nodes, searchQuery) => {
+    // If there is no search query default to showing the first 20 nodes from the nodes array
+    // (performance hit to render the entire thing by default)
+    if (!searchQuery.length) { return nodes.slice(0, 20) }
+
+    // if there is an '@' in the search query we are assuming they are using the format pubkey@host
+    // we can ignore the '@' and the host and just grab the pubkey for our search
     const query = searchQuery.includes('@') ? searchQuery.split('@')[0] : searchQuery
 
     return filter(nodes, node => node.alias.includes(query) || node.pub_key.includes(query))

From 674d21b3e08002a902e8ac8abca176f47fd1a9ad Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 11 Jan 2018 21:49:48 -0600
Subject: [PATCH 3/3] fix(contacts-form): show loading spinner next to manual
 form when there are loading channels so the user has some feedback from the
 manual form

---
 app/components/Contacts/ContactsForm.js   | 9 +++++++++
 app/components/Contacts/ContactsForm.scss | 8 ++++++++
 2 files changed, 17 insertions(+)

diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js
index 4a33af26..5a0955a2 100644
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -174,6 +174,15 @@ class ContactsForm extends React.Component {
                   onChange={event => this.setState({ manualFormInput: event.target.value })}
                 />
                 <div className={styles.submit} onClick={manualFormSubmit}>Submit</div>
+
+                {
+                  loadingChannelPubkeys.length > 0 &&
+                  <div className={styles.manualFormSpinner}>
+                    <div className={styles.loading}>
+                      <div className={styles.spinner} />
+                    </div>
+                  </div>
+                }
               </section>
             </div>
           }
diff --git a/app/components/Contacts/ContactsForm.scss b/app/components/Contacts/ContactsForm.scss
index 19a6dd4e..6b33b320 100644
--- a/app/components/Contacts/ContactsForm.scss
+++ b/app/components/Contacts/ContactsForm.scss
@@ -120,6 +120,7 @@
 }
 
 .manualForm {
+  position: relative;
   background: $lightgrey;
   color: $darkestgrey;
   padding: 30px 15px;
@@ -151,6 +152,13 @@
       color: $main;
     }
   }
+
+  .manualFormSpinner {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    padding: 0 10px;
+  }
 }
 
 .footer {