feature(SuggestedNodes): create suggested nodes component

app/components/Contacts/Network.js

@@ -8,6 +8,7 @@ import plus from 'icons/plus.svg'
 import search from 'icons/search.svg'
 
 import Value from 'components/Value'
+import SuggestedNodes from './SuggestedNodes'
 
 import styles from './Network.scss'
 
@@ -139,6 +140,13 @@ class Network extends Component {
         </header>
 
         <div className={styles.channels}>
+        {
+          !loadingChannelPubkeys.length && !currentChannels.length &&
+          <SuggestedNodes />
+        }
+
+        {
+          loadingChannelPubkeys.length > 0 && currentChannels.length > 0 &&
           <header className={styles.listHeader}>
             <section>
               <h2 onClick={toggleFilterPulldown} className={styles.filterTitle}>
@@ -154,7 +162,6 @@ class Network extends Component {
                 }
               </ul>
             </section>
-
               <section className={styles.refreshContainer}>
                 <span className={styles.refresh} onClick={refreshClicked} ref={(ref) => { this.repeat = ref }}>
                   {
@@ -166,10 +173,11 @@ class Network extends Component {
                 </span>
               </section>
           </header>
+        }
 
           <ul className={filterPulldown && styles.fade}>
             {
-              loadingChannelPubkeys.map((loadingPubkey) => {
+              loadingChannelPubkeys.length > 0 && loadingChannelPubkeys.map((loadingPubkey) => {
                 // TODO(jimmymow): refactor this out. same logic is in displayNodeName above
                 const node = find(nodes, n => loadingPubkey === n.pub_key)
                 const nodeDisplay = () => {
@@ -264,7 +272,8 @@ class Network extends Component {
             }
           </ul>
         </div>
-
+        {
+          loadingChannelPubkeys.length > 0 && currentChannels.length > 0 &&
           <footer className={styles.search}>
             <label htmlFor='search' className={`${styles.label} ${styles.input}`}>
               <Isvg src={search} />
@@ -278,6 +287,7 @@ class Network extends Component {
               onChange={event => updateChannelSearchQuery(event.target.value)}
             />
           </footer>
+        }
       </div>
     )
   }

app/components/Contacts/SuggestedNodes.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './SuggestedNodes.scss'
+
+const SuggestedNodes = ({}) => {
+  console.log('yo')
+  return (
+    <div>suggested nodes</div>
+  )
+}
+
+SuggestedNodes.propTypes = {}
+
+export default SuggestedNodes