Progressive Accounts List Rendering #3240

js/src/views/Accounts/Summary/summary.js

@@ -16,6 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import { Link } from 'react-router';
+import { isEqual } from 'lodash';
 
 import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags, Input } from '../../../ui';
 
@@ -30,7 +31,6 @@ export default class Summary extends Component {
     link: PropTypes.string,
     name: PropTypes.string,
     noLink: PropTypes.bool,
-    children: PropTypes.node,
     handleAddSearchToken: PropTypes.func
   };
 
@@ -42,8 +42,42 @@ export default class Summary extends Component {
     name: 'Unnamed'
   };
 
+  shouldComponentUpdate (nextProps) {
+    const prev = {
+      link: this.props.link, name: this.props.name,
+      noLink: this.props.noLink,
+      meta: this.props.account.meta, address: this.props.account.address
+    };
+
+    const next = {
+      link: nextProps.link, name: nextProps.name,
+      noLink: nextProps.noLink,
+      meta: nextProps.account.meta, address: nextProps.account.address
+    };
+
+    if (!isEqual(next, prev)) {
+      return true;
+    }
+
+    const prevTokens = this.props.balance.tokens || [];
+    const nextTokens = nextProps.balance.tokens || [];
+
+    if (prevTokens.length !== nextTokens.length) {
+      return true;
+    }
+
+    const prevValues = prevTokens.map((t) => t.value.toNumber());
+    const nextValues = nextTokens.map((t) => t.value.toNumber());
+
+    if (!isEqual(prevValues, nextValues)) {
+      return true;
+    }
+
+    return false;
+  }
+
   render () {
-    const { account, children, handleAddSearchToken } = this.props;
+    const { account, handleAddSearchToken } = this.props;
     const { tags } = account.meta;
 
     if (!account) {
@@ -71,7 +105,6 @@ export default class Summary extends Component {
           byline={ addressComponent } />
 
         { this.renderBalance() }
-        { children }
       </Container>
     );
   }

js/src/views/Accounts/accounts.css

@@ -30,3 +30,25 @@
   right: 1em;
   top: 4em;
 }
+
+.loadings {
+  display: flex;
+  flex-wrap: wrap;
+
+  .loading {
+    flex: 0 1 50%;
+    width: 50%;
+    height: 150px;
+    display: flex;
+    padding: 0.25em;
+    box-sizing: border-box;
+
+    > div {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+  }
+}

js/src/views/Accounts/accounts.js

@@ -38,37 +38,69 @@ class Accounts extends Component {
   }
 
   state = {
+    accountsNodes: null,
     addressBook: false,
     newDialog: false,
     sortOrder: '',
     searchValues: [],
-    searchTokens: []
+    searchTokens: [],
+    show: false
+  }
+
+  componentDidMount () {
+    window.setTimeout(() => {
+      const accountsNodes = this.renderAccounts();
+      this.setState({ show: true, accountsNodes });
+    }, 0);
   }
 
   render () {
-    const { accounts, hasAccounts, balances } = this.props;
-    const { searchValues, sortOrder } = this.state;
-
     return (
       <div className={ styles.accounts }>
         { this.renderNewDialog() }
         { this.renderActionbar() }
-        <Page>
-          <List
-            search={ searchValues }
-            accounts={ accounts }
-            balances={ balances }
-            empty={ !hasAccounts }
-            order={ sortOrder }
-            handleAddSearchToken={ this.onAddSearchToken } />
-          <Tooltip
-            className={ styles.accountTooltip }
-            text='your accounts are visible for easy access, allowing you to edit the meta information, make transfers, view transactions and fund the account' />
-        </Page>
+
+        { this.state.show ? this.state.accountsNodes : this.renderLoading() }
       </div>
     );
   }
 
+  renderLoading () {
+    const { accounts } = this.props;
+
+    const loadings = ((accounts && Object.keys(accounts)) || []).map((_, idx) => (
+      <div key={ idx } className={ styles.loading }>
+        <div></div>
+      </div>
+    ));
+
+    return (
+      <div className={ styles.loadings }>
+        { loadings }
+      </div>
+    );
+  }
+
+  renderAccounts () {
+    const { accounts, hasAccounts, balances } = this.props;
+    const { searchValues, sortOrder } = this.state;
+
+    return (
+      <Page>
+        <List
+          search={ searchValues }
+          accounts={ accounts }
+          balances={ balances }
+          empty={ !hasAccounts }
+          order={ sortOrder }
+          handleAddSearchToken={ this.onAddSearchToken } />
+        <Tooltip
+          className={ styles.accountTooltip }
+          text='your accounts are visible for easy access, allowing you to edit the meta information, make transfers, view transactions and fund the account' />
+      </Page>
+    );
+  }
+
   renderSearchButton () {
     const onChange = (searchTokens, searchValues) => {
       this.setState({ searchTokens, searchValues });