Skip to content
Permalink
Browse files

perf(channels): optimize list rendering

  • Loading branch information...
korhaliv committed Apr 18, 2019
1 parent c0b92cc commit e2d22a0a520ac88befc7e655c567d23dd31fd01c
@@ -348,6 +348,7 @@
"lndconnect": "0.2.4",
"lodash.debounce": "4.0.8",
"lodash.get": "4.4.2",
"lodash.isequal": "4.5.0",
"lodash.matches": "4.6.0",
"lodash.partition": "4.6.0",
"lodash.pick": "4.4.0",
@@ -11,7 +11,6 @@ const StyledList = styled(Grid)`
overflow-y: overlay !important;
overflow-x: hidden !important;
`

const ChannelCardList = ({
channels,
currencyName,
@@ -43,7 +42,6 @@ const ChannelCardList = ({
>
<ChannelCardListItem
channel={channel}
css={{ height: '100%' }}
currencyName={currencyName}
networkInfo={networkInfo}
openModal={openModal}
@@ -62,6 +60,7 @@ const ChannelCardList = ({
columnCount={2}
columnWidth={width / 2}
height={height}
overscanRowCount={5}
rowCount={Math.ceil(channels.length / 2)}
rowHeight={ROW_HEIGHT}
width={width}
@@ -1,5 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import isEqual from 'lodash.isequal'
import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
import styled from 'styled-components'
import { opacity } from 'styled-system'
@@ -17,8 +18,10 @@ const ClippedText = withEllipsis(Text)
const Box = styled(BaseBox)(opacity)
const Flex = styled(BaseFlex)(opacity)

const areEqual = (prevProps, nextProps) => isEqual(prevProps, nextProps)

const ChannelCardListItem = React.memo(
({ intl, channel, currencyName, openModal, setSelectedChannel, networkInfo, ...rest }) => {
({ channel, currencyName, openModal, setSelectedChannel, networkInfo }) => {
const {
channel_point,
display_name,
@@ -29,8 +32,9 @@ const ChannelCardListItem = React.memo(
active,
} = channel
const opacity = active ? 1 : 0.3

return (
<Card {...rest}>
<Card>
<Panel>
<Panel.Header>
<Flex justifyContent="space-between">
@@ -82,7 +86,8 @@ const ChannelCardListItem = React.memo(
</Panel>
</Card>
)
}
},
areEqual
)

ChannelCardListItem.displayName = 'ChannelCardListItem'
@@ -1,5 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import isEqual from 'lodash.isequal'
import { Box, Flex } from 'rebass'
import { Card, Heading, Text } from 'components/UI'
import { withEllipsis } from 'hocs'
@@ -10,6 +11,8 @@ import ChannelStatus from './ChannelStatus'
const ClippedHeading = withEllipsis(Heading.h1)
const ClippedText = withEllipsis(Text)

const areEqual = (prevProps, nextProps) => isEqual(prevProps, nextProps)

const ChannelSummaryListItem = React.memo(props => {
const { channel, openModal, setSelectedChannel, ...rest } = props

@@ -58,7 +61,7 @@ const ChannelSummaryListItem = React.memo(props => {
</Flex>
</Card>
)
})
}, areEqual)

ChannelSummaryListItem.displayName = 'ChannelSummaryListItem'

@@ -10567,7 +10567,7 @@ lodash.get@4.4.2, lodash.get@^4.4.2:
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=

lodash.isequal@^4.5.0:
lodash.isequal@4.5.0, lodash.isequal@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=

0 comments on commit e2d22a0

Please sign in to comment.
You can’t perform that action at this time.