optimise file page renders (#115)

This commit is contained in:
Akinwale Ariwodola 2020-01-29 12:55:04 +01:00 committed by GitHub
parent d9ada93ff3
commit 017787ef25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 20 deletions

View file

@ -291,25 +291,27 @@ class DiscoverPage extends React.PureComponent {
);
render() {
const { navigation, sortByItem, timeItem } = this.props;
const { currentRoute, navigation, sortByItem, timeItem } = this.props;
const { orderBy, showModalTagSelector, showSortPicker, showTimePicker } = this.state;
return (
<View style={discoverStyle.container}>
<UriBar navigation={navigation} belowOverlay={showModalTagSelector} />
<SectionList
ListHeaderComponent={this.sectionListHeader}
ListFooterComponent={this.sectionListFooter}
style={discoverStyle.scrollContainer}
contentContainerStyle={discoverStyle.scrollPadding}
initialNumToRender={4}
maxToRenderPerBatch={4}
removeClippedSubviews
renderItem={this.renderSectionListItem}
renderSectionHeader={this.renderSectionHeader}
sections={this.buildSections()}
keyExtractor={(item, index) => item}
/>
{currentRoute !== Constants.ROUTE_FILE && currentRoute !== Constants.DRAWER_ROUTE_FILE_VIEW && (
<SectionList
ListHeaderComponent={this.sectionListHeader}
ListFooterComponent={this.sectionListFooter}
style={discoverStyle.scrollContainer}
contentContainerStyle={discoverStyle.scrollPadding}
initialNumToRender={4}
maxToRenderPerBatch={4}
removeClippedSubviews
renderItem={this.renderSectionListItem}
renderSectionHeader={this.renderSectionHeader}
sections={this.buildSections()}
keyExtractor={(item, index) => item}
/>
)}
{!showModalTagSelector && !showSortPicker && !showTimePicker && (
<FloatingWalletBalance navigation={navigation} />
)}

View file

@ -27,7 +27,6 @@ import {
selectPurchasedUris,
selectFailedPurchaseUris,
selectPurchaseUriErrorMessage,
selectIsSearching,
} from 'lbry-redux';
import {
doClaimEligiblePurchaseRewards,
@ -70,7 +69,6 @@ const select = (state, props) => {
streamingUrl: makeSelectStreamingUrlForUri(contentUri)(state),
thumbnail: makeSelectThumbnailForUri(contentUri)(state),
title: makeSelectTitleForUri(contentUri)(state),
isSearchingRecommendContent: selectIsSearching(state),
viewCount: makeSelectViewCountForUri(contentUri)(state),
};
};

View file

@ -238,10 +238,42 @@ class FilePage extends React.PureComponent {
const { fileInfo: prevFileInfo } = this.props;
const { fileInfo } = nextProps;
return (
Object.keys(this.difference(nextProps, this.props)).length > 0 ||
Object.keys(this.difference(nextState, this.state)).length > 0
);
const propKeyTriggers = ['balance', 'viewCount', 'isResolvingUri'];
const stateKeyTriggers = [
'downloadPressed',
'fullscreenMode',
'mediaLoaded',
'playerBgHeighht',
'playerHeight',
'relatedY',
'showTipView',
'showImageViewer',
'showWebView',
'showDescription',
'showRecommended',
'uri',
];
for (let i = 0; i < propKeyTriggers.length; i++) {
const key = propKeyTriggers[i];
if (this.props[key] !== nextProps[key]) {
return true;
}
}
for (let i = 0; i < stateKeyTriggers.length; i++) {
const key = stateKeyTriggers[i];
if (this.state[key] !== nextState[key]) {
return true;
}
}
if (!prevFileInfo && fileInfo) {
return true;
}
if (prevFileInfo && fileInfo && Object.keys(this.difference(fileInfo, prevFileInfo)).length > 0) {
return true;
}
return false;
}
componentDidUpdate(prevProps, prevState) {