Merge pull request #127 from loeck/master

Improved performance for TransactionsList, remove Defer on Chart in D…

src/components/DashboardPage/AccountCard.js

@@ -9,7 +9,6 @@ import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
 import { AreaChart } from 'components/base/Chart'
 import Bar from 'components/base/Bar'
 import Box, { Card } from 'components/base/Box'
-import Defer from 'components/base/Defer'
 import FormattedVal from 'components/base/FormattedVal'
 
 const AccountCard = ({
@@ -47,17 +46,15 @@ const AccountCard = ({
         />
       )}
     </Box>
-    <Defer>
-      <AreaChart
-        tiny
-        id={`account-chart-${account.id}`}
-        color="#fcb653"
-        height={52}
-        data={data}
-        strokeWidth={1}
-        linearGradient={[[5, 0.4], [80, 0]]}
-      />
-    </Defer>
+    <AreaChart
+      tiny
+      id={`account-chart-${account.id}`}
+      color="#fcb653"
+      height={52}
+      data={data}
+      strokeWidth={1}
+      linearGradient={[[5, 0.4], [80, 0]]}
+    />
   </Card>
 )
 

src/components/DashboardPage/index.js

@@ -25,7 +25,6 @@ import { saveSettings } from 'actions/settings'
 import { AreaChart } from 'components/base/Chart'
 import Box, { Card } from 'components/base/Box'
 import Pills from 'components/base/Pills'
-import Defer from 'components/base/Defer'
 import Text from 'components/base/Text'
 import TransactionsList from 'components/TransactionsList'
 
@@ -56,6 +55,7 @@ type State = {
 }
 
 const ACCOUNTS_BY_LINE = 3
+const ALL_TRANSACTIONS_LIMIT = 10
 const TIMEOUT_REFRESH_DATAS = 5e3
 
 const itemsTimes = [
@@ -92,7 +92,9 @@ const getAllTransactions = accounts => {
     return result
   }, [])
 
-  return sortBy(allTransactions, t => t.received_at).reverse()
+  return sortBy(allTransactions, t => t.received_at)
+    .reverse()
+    .slice(0, ALL_TRANSACTIONS_LIMIT)
 }
 
 const getAccountsChunk = accounts => {
@@ -123,7 +125,7 @@ class DashboardPage extends PureComponent<Props, State> {
       })
     }
 
-    if (nextProps.accounts.length !== this.props.accounts.length) {
+    if (nextProps.accounts !== this.props.accounts) {
       this.setState({
         accountsChunk: getAccountsChunk(nextProps.accounts),
         allTransactions: getAllTransactions(nextProps.accounts),
@@ -192,33 +194,31 @@ class DashboardPage extends PureComponent<Props, State> {
               <Box px={6}>
                 <BalanceInfos since={selectedTime} />
               </Box>
-              <Defer>
-                <Box ff="Open Sans" fontSize={4} color="warmGrey">
-                  <AreaChart
-                    id="dashboard-chart"
-                    margin={{
-                      top: space[6],
-                      bottom: 0,
-                      left: space[6] - 10,
-                      right: space[6],
-                    }}
-                    color="#5286f7"
-                    height={250}
-                    data={takeRight(
-                      fakeDatas.reduce((res, data) => {
-                        data.forEach((d, i) => {
-                          res[i] = {
-                            name: d.name,
-                            value: (res[i] ? res[i].value : 0) + d.value,
-                          }
-                        })
-                        return res
-                      }, []),
-                      25,
-                    )}
-                  />
-                </Box>
-              </Defer>
+              <Box ff="Open Sans" fontSize={4} color="warmGrey">
+                <AreaChart
+                  id="dashboard-chart"
+                  margin={{
+                    top: space[6],
+                    bottom: 0,
+                    left: space[6] - 10,
+                    right: space[6],
+                  }}
+                  color="#5286f7"
+                  height={250}
+                  data={takeRight(
+                    fakeDatas.reduce((res, data) => {
+                      data.forEach((d, i) => {
+                        res[i] = {
+                          name: d.name,
+                          value: (res[i] ? res[i].value : 0) + d.value,
+                        }
+                      })
+                      return res
+                    }, []),
+                    25,
+                  )}
+                />
+              </Box>
             </Card>
             <Box flow={4}>
               <Box horizontal align="flex-end">

src/components/TransactionsList/index.js

@@ -1,9 +1,10 @@
 // @flow
 
-import React from 'react'
+import React, { Component } from 'react'
 import styled from 'styled-components'
 import moment from 'moment'
 import get from 'lodash/get'
+import isEqual from 'lodash/isEqual'
 
 import type { Transaction as TransactionType } from 'types/common'
 
@@ -118,28 +119,48 @@ type Props = {
   withAccounts?: boolean,
 }
 
-const TransactionsList = ({ transactions, withAccounts }: Props) => (
-  <Box flow={1}>
-    <Box horizontal pt={4}>
-      <HeaderCol size={DATE_COL_SIZE}>{'Date'}</HeaderCol>
-      {withAccounts && <HeaderCol size={ACCOUNT_COL_SIZE}>{'Account'}</HeaderCol>}
-      <HeaderCol grow>{'Address'}</HeaderCol>
-      <HeaderCol size={AMOUNT_COL_SIZE} justify="flex-end">
-        {'Amount'}
-      </HeaderCol>
-    </Box>
-    <Defer>
-      <Box>
-        {transactions.map(t => (
-          <Transaction key={`{${t.hash}-${t.account ? t.account.id : ''}`} tx={t} />
-        ))}
-      </Box>
-    </Defer>
-  </Box>
-)
+class TransactionsList extends Component<Props> {
+  static defaultProps = {
+    withAccounts: false,
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    if (nextProps.transactions !== this.props.transactions) {
+      this._hashCache = this.getHashCache(nextProps.transactions)
+    }
+  }
+
+  shouldComponentUpdate(nextProps: Props) {
+    return !isEqual(this._hashCache, this.getHashCache(nextProps.transactions))
+  }
 
-TransactionsList.defaultProps = {
-  withAccounts: false,
+  getHashCache = (transactions: Array<TransactionType>) => transactions.map(t => t.hash)
+
+  _hashCache = this.getHashCache(this.props.transactions)
+
+  render() {
+    const { transactions, withAccounts } = this.props
+
+    return (
+      <Box flow={1}>
+        <Box horizontal pt={4}>
+          <HeaderCol size={DATE_COL_SIZE}>{'Date'}</HeaderCol>
+          {withAccounts && <HeaderCol size={ACCOUNT_COL_SIZE}>{'Account'}</HeaderCol>}
+          <HeaderCol grow>{'Address'}</HeaderCol>
+          <HeaderCol size={AMOUNT_COL_SIZE} justify="flex-end">
+            {'Amount'}
+          </HeaderCol>
+        </Box>
+        <Defer>
+          <Box>
+            {transactions.map(t => (
+              <Transaction key={`{${t.hash}-${t.account ? t.account.id : ''}`} tx={t} />
+            ))}
+          </Box>
+        </Defer>
+      </Box>
+    )
+  }
 }
 
 export default TransactionsList