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,14 +72,28 @@ class Addresses extends Component {
   }
 
   render () {
-    const { balances, contacts, hasContacts } = this.props;
-    const { searchValues, sortOrder } = this.state;
-
     return (
       <div>
         { this.renderActionbar() }
         { this.renderAddAddress() }
         <Page>
+          { this.renderAccountsList() }
+        </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 }
@@ -87,9 +101,8 @@ class Addresses extends Component {
         balances={ balances }
         empty={ !hasContacts }
         order={ sortOrder }
-            handleAddSearchToken={ this.onAddSearchToken } />
-        </Page>
-      </div>
+        handleAddSearchToken={ this.onAddSearchToken }
+      />
     );
   }