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,7 +46,6 @@ const AccountCard = ({
         />
       )}
     </Box>
-    <Defer>
     <AreaChart
       tiny
       id={`account-chart-${account.id}`}
@@ -57,7 +55,6 @@ const AccountCard = ({
       strokeWidth={1}
       linearGradient={[[5, 0.4], [80, 0]]}
     />
-    </Defer>
   </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,7 +194,6 @@ 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"
@@ -218,7 +219,6 @@ class DashboardPage extends PureComponent<Props, State> {
                   )}
                 />
               </Box>
-              </Defer>
             </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,7 +119,29 @@ type Props = {
   withAccounts?: boolean,
 }
 
-const TransactionsList = ({ transactions, withAccounts }: Props) => (
+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))
+  }
+
+  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>
@@ -136,10 +159,8 @@ const TransactionsList = ({ transactions, withAccounts }: Props) => (
           </Box>
         </Defer>
       </Box>
-)
+    )
-
+  }
-TransactionsList.defaultProps = {
-  withAccounts: false,
 }
 
 export default TransactionsList