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] 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 {