Browse Source

Remove <Defer /> component

This reduce amount of blinks - but not prevent them completely in dev
So still need investigate
master
meriadec 7 years ago
parent
commit
2fe2470b3a
No known key found for this signature in database GPG Key ID: 1D2FC2305E2CB399
  1. 8
      src/components/OperationsList/index.js
  2. 40
      src/components/base/Defer.js
  3. 3
      src/components/base/Modal/index.js

8
src/components/OperationsList/index.js

@ -24,7 +24,6 @@ import IconAngleDown from 'icons/AngleDown'
import Box, { Card } from 'components/base/Box'
import Text from 'components/base/Text'
import Defer from 'components/base/Defer'
import Track from 'analytics/Track'
import SectionTitle from './SectionTitle'
@ -100,7 +99,6 @@ export class OperationsList extends PureComponent<Props, State> {
const accountsMap = accounts ? keyBy(accounts, 'id') : { [account.id]: account }
return (
<Defer>
<Box flow={4}>
{title && (
<Text color="dark" ff="Museo Sans" fontSize={6}>
@ -135,10 +133,7 @@ export class OperationsList extends PureComponent<Props, State> {
onMount
event="OperationsListEndReached"
totalSections={groupedOperations.sections.length}
totalOperations={groupedOperations.sections.reduce(
(sum, s) => sum + s.data.length,
0,
)}
totalOperations={groupedOperations.sections.reduce((sum, s) => sum + s.data.length, 0)}
/>
) : null}
{!groupedOperations.completed ? (
@ -154,7 +149,6 @@ export class OperationsList extends PureComponent<Props, State> {
</Box>
)}
</Box>
</Defer>
)
}
}

40
src/components/base/Defer.js

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

3
src/components/base/Modal/index.js

@ -19,7 +19,6 @@ import { closeModal, isModalOpened, getModalData } from 'reducers/modals'
import Box from 'components/base/Box'
import GrowScroll from 'components/base/GrowScroll'
import Defer from 'components/base/Defer'
export { default as ModalBody } from './ModalBody'
export { default as ConfirmModal } from './ConfirmModal'
@ -126,7 +125,7 @@ class Pure extends Component<any> {
render() {
const { data, onClose, render } = this.props
return <Defer>{render({ data, onClose })}</Defer>
return render({ data, onClose })
}
}

Loading…
Cancel
Save