Don't show addresses while loading balances (fix flash of unsorted)

js/src/views/Addresses/addresses.js

@@ -23,7 +23,7 @@ import { uniq, isEqual } from 'lodash';
 import List from '../Accounts/List';
 import Summary from '../Accounts/Summary';
 import { AddAddress } from '~/modals';
-import { Actionbar, ActionbarExport, ActionbarImport, ActionbarSearch, ActionbarSort, Button, Page } from '~/ui';
+import { Actionbar, ActionbarExport, ActionbarImport, ActionbarSearch, ActionbarSort, Button, Page, Loading } from '~/ui';
 import { setVisibleAccounts } from '~/redux/providers/personalActions';
 
 import styles from './addresses.css';
@@ -72,27 +72,40 @@ class Addresses extends Component {
   }
 
   render () {
-    const { balances, contacts, hasContacts } = this.props;
-    const { searchValues, sortOrder } = this.state;
-
     return (
       <div>
         { this.renderActionbar() }
         { this.renderAddAddress() }
         <Page>
-          <List
+          { this.renderAccountsList() }
-            link='address'
-            search={ searchValues }
-            accounts={ contacts }
-            balances={ balances }
-            empty={ !hasContacts }
-            order={ sortOrder }
-            handleAddSearchToken={ this.onAddSearchToken } />
         </Page>
       </div>
     );
   }
 
+  renderAccountsList () {
+    const { balances, contacts, hasContacts } = this.props;
+    const { searchValues, sortOrder } = this.state;
+
+    if (hasContacts && Object.keys(balances).length === 0) {
+      return (
+        <Loading size={ 3 } />
+      );
+    }
+
+    return (
+      <List
+        link='address'
+        search={ searchValues }
+        accounts={ contacts }
+        balances={ balances }
+        empty={ !hasContacts }
+        order={ sortOrder }
+        handleAddSearchToken={ this.onAddSearchToken }
+      />
+    );
+  }
+
   renderSortButton () {
     const onChange = (sortOrder) => {
       this.setState({ sortOrder });