diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js
index 049aa246..5a0955a2 100644
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -138,7 +138,7 @@ class ContactsForm extends React.Component {
{
- contactsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => (
+ filteredNetworkNodes.map(node => (
-
{
@@ -174,6 +174,15 @@ class ContactsForm extends React.Component {
onChange={event => this.setState({ manualFormInput: event.target.value })}
/>
Submit
+
+ {
+ loadingChannelPubkeys.length > 0 &&
+
+ }
}
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 {
diff --git a/app/reducers/contactsform.js b/app/reducers/contactsform.js
index a1f48a58..40e2a777 100644
--- a/app/reducers/contactsform.js
+++ b/app/reducers/contactsform.js
@@ -70,7 +70,17 @@ 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) => {
+ // 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))
+ }
)
contactFormSelectors.showManualForm = createSelector(