Improved performance on Wrapper and add Defer component

src/components/IsUnlocked/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { PureComponent } from 'react'
+import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { compose } from 'redux'
 import { translate } from 'react-i18next'
@@ -26,12 +26,12 @@ type InputValue = {
 }
 
 type Props = {
-  t: T,
   accounts: Accounts,
+  children: any,
   fetchAccounts: Function,
   isLocked: boolean,
-  render: Function,
   settings: Settings,
+  t: T,
   unlock: Function,
 }
 type State = {
@@ -55,7 +55,7 @@ const defaultState = {
   },
 }
 
-class IsUnlocked extends PureComponent<Props, State> {
+class IsUnlocked extends Component<Props, State> {
   state = {
     ...defaultState,
   }
@@ -76,6 +76,14 @@ class IsUnlocked extends PureComponent<Props, State> {
     }
   }
 
+  shouldComponentUpdate(nextProps) {
+    if (nextProps.isLocked) {
+      return true
+    }
+
+    return nextProps.children !== this.props.children
+  }
+
   handleChangeInput = (key: $Keys<InputValue>) => (value: $Values<InputValue>) =>
     this.setState(prev => ({
       inputValue: {
@@ -111,7 +119,7 @@ class IsUnlocked extends PureComponent<Props, State> {
 
   render() {
     const { inputValue } = this.state
-    const { isLocked, render, t } = this.props
+    const { isLocked, t } = this.props
 
     if (isLocked) {
       return (
@@ -132,7 +140,7 @@ class IsUnlocked extends PureComponent<Props, State> {
       )
     }
 
-    return render()
+    return this.props.children
   }
 }
 

src/components/TransactionsList/index.js

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import moment from 'moment'
 import get from 'lodash/get'
 
+import Defer from 'components/base/Defer'
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
 
@@ -81,7 +82,11 @@ const Transaction = ({ tx }: { tx: TransactionType }) => {
   )
 }
 
-export default ({ transactions }: { transactions: Array<TransactionType> }) => (
+type Props = {
+  transactions: Array<TransactionType>,
+}
+
+export default ({ transactions }: Props) => (
   <Box flow={2}>
     <Box horizontal>
       <HeaderCol size={DATE_COL_SIZE}>{'Date'}</HeaderCol>
@@ -90,6 +95,8 @@ export default ({ transactions }: { transactions: Array<TransactionType> }) => (
         {'Amount'}
       </HeaderCol>
     </Box>
-    <Box>{transactions.map(t => <Transaction key={t.hash} tx={t} />)}</Box>
+    <Defer>
+      <Box>{transactions.map(t => <Transaction key={t.hash} tx={t} />)}</Box>
+    </Defer>
   </Box>
 )

src/components/Wrapper.js

@@ -25,31 +25,27 @@ class Wrapper extends Component<{}> {
       <Fragment>
         {process.platform === 'darwin' && <AppRegionDrag />}
 
-        <IsUnlocked
+        <IsUnlocked>
-          render={() => (
+          {__DEV__ && <DevToolbar />}
-            <Fragment>
+
-              {__DEV__ && <DevToolbar />}
+          {Object.entries(modals).map(([name, ModalComponent]: [string, any]) => (
-
+            <ModalComponent key={name} />
-              {Object.entries(modals).map(([name, ModalComponent]: [string, any]) => (
+          ))}
-                <ModalComponent key={name} />
+
-              ))}
+          <Box grow horizontal bg="white">
-
+            <SideBar />
-              <Box grow horizontal bg="white">
+
-                <SideBar />
+            <Box shrink grow bg="cream" color="grey" relative>
-
+              <TopBar />
-                <Box shrink grow bg="cream" color="grey" relative>
+              <UpdateNotifier />
-                  <TopBar />
+              <GrowScroll p={3} style={{ paddingTop: 80 }}>
-                  <UpdateNotifier />
+                <Route path="/" exact component={DashboardPage} />
-                  <GrowScroll p={3} style={{ paddingTop: 80 }}>
+                <Route path="/settings" component={SettingsPage} />
-                    <Route path="/" exact component={DashboardPage} />
+                <Route path="/account/:id" component={AccountPage} />
-                    <Route path="/settings" component={SettingsPage} />
+              </GrowScroll>
-                    <Route path="/account/:id" component={AccountPage} />
+            </Box>
-                  </GrowScroll>
+          </Box>
-                </Box>
+        </IsUnlocked>
-              </Box>
-            </Fragment>
-          )}
-        />
       </Fragment>
     )
   }

src/components/base/Defer.js

@@ -0,0 +1,38 @@
+// @flow
+
+import { PureComponent } from 'react'
+
+type Props = {
+  children: any,
+}
+
+type State = {
+  show: boolean,
+}
+
+class Defer extends PureComponent<Props, State> {
+  state = {
+    show: false,
+  }
+
+  componentDidMount() {
+    window.requestAnimationFrame(() =>
+      this.setState({
+        show: true,
+      }),
+    )
+  }
+
+  render() {
+    const { children } = this.props
+    const { show } = this.state
+
+    if (show) {
+      return children
+    }
+
+    return null
+  }
+}
+
+export default Defer

src/components/base/Modal/index.js

@@ -4,7 +4,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable react/no-multi-comp */
 
-import React, { Component, PureComponent } from 'react'
+import React, { Component } from 'react'
 import { findDOMNode } from 'react-dom'
 import { connect } from 'react-redux'
 import Mortal from 'react-mortal'
@@ -18,6 +18,7 @@ import { closeModal, isModalOpened, getModalData } from 'reducers/modals'
 import Box, { Tabbable } from 'components/base/Box'
 import GrowScroll from 'components/base/GrowScroll'
 import Icon from 'components/base/Icon'
+import Defer from 'components/base/Defer'
 
 type Props = {
   isOpened?: boolean,
@@ -117,11 +118,11 @@ class Pure extends Component<any> {
   render() {
     const { data, onClose, render } = this.props
 
-    return render({ data, onClose })
+    return <Defer>{render({ data, onClose })}</Defer>
   }
 }
 
-export class Modal extends PureComponent<Props> {
+export class Modal extends Component<Props> {
   static defaultProps = {
     data: undefined,
     isOpened: false,
@@ -130,6 +131,14 @@ export class Modal extends PureComponent<Props> {
     preventBackdropClick: false,
   }
 
+  shouldComponentUpdate(nextProps: Props) {
+    if (this.props.isOpened || nextProps.isOpened) {
+      return true
+    }
+
+    return false
+  }
+
   componentDidUpdate(prevProps: Props) {
     const didOpened = this.props.isOpened && !prevProps.isOpened
     const didClose = !this.props.isOpened && prevProps.isOpened
@@ -171,12 +180,18 @@ export class Modal extends PureComponent<Props> {
         {(m, isVisible, isAnimated) => (
           <Container isVisible={isVisible}>
             <Backdrop op={m.opacity} />
-            <GrowScroll full align="center" onClick={preventBackdropClick ? undefined : onClose}>
+            <GrowScroll
+              align="center"
+              full
+              justify="flex-start"
+              onClick={preventBackdropClick ? undefined : onClose}
+              style={{ height: '100%' }}
+            >
               <Wrapper
                 op={m.opacity}
                 offset={m.y}
-                onClick={e => e.stopPropagation()}
                 innerRef={n => (this._wrapper = n)}
+                onClick={e => e.stopPropagation()}
               >
                 <Pure isAnimated={isAnimated} render={render} data={data} onClose={onClose} />
               </Wrapper>

src/styles/global.js

@@ -43,6 +43,13 @@ injectGlobal`
     font-style: italic;
   }
 
+  .scroll-content {
+    height: 100%;
+
+    > div {
+      height: 100%;
+    }
+  }
   .scrollbar-thumb {
     background: rgb(102, 102, 102) !important;
     padding: 2px;