LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

ChannelPage: Don't mount inactive ChannelContent

Browse source 
## Issue
In the Channel Page, if the _Collections_ `claim_search` comes in after the main content's `claim_search`, the Collection's `ChannelContent` is being re-rendered despite not being in the active Tab. This causes a 0.4 CLS score (it's ridiculous that invisible components are taken into account). Apparently 41% of users are hitting this scenario, causing a poor aggregate.

## Change
Don't mount the `ChannelContent` components unless its tab is the active one. It doesn't seem like Reach Tab hides components under the inactive tab.
This commit is contained in:
infinite-persistence 2021-07-23 14:47:28 +08:00
parent f6e648222e
commit 077207e203
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
ui/page/channel/view.jsx
View file

@ -87,7 +87,7 @@ function ChannelPage(props: Props) {
} = useHistory(); } = useHistory();
const [viewBlockedChannel, setViewBlockedChannel] = React.useState(false); const [viewBlockedChannel, setViewBlockedChannel] = React.useState(false);
const urlParams = new URLSearchParams(search); const urlParams = new URLSearchParams(search);
const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined; const currentView = urlParams.get(PAGE_VIEW_QUERY) || PAGE.CONTENT;
const [discussionWasMounted, setDiscussionWasMounted] = React.useState(false); const [discussionWasMounted, setDiscussionWasMounted] = React.useState(false);
const editing = urlParams.get(PAGE_VIEW_QUERY) === PAGE.EDIT; const editing = urlParams.get(PAGE_VIEW_QUERY) === PAGE.EDIT;
const { channelName } = parseURI(uri); const { channelName } = parseURI(uri);
@ -288,21 +288,25 @@ function ChannelPage(props: Props) {
</TabList> </TabList>
<TabPanels> <TabPanels>
<TabPanel> <TabPanel>
<ChannelContent {currentView === PAGE.CONTENT && (
uri={uri} <ChannelContent
channelIsBlackListed={channelIsBlackListed} uri={uri}
viewHiddenChannels channelIsBlackListed={channelIsBlackListed}
empty={<section className="main--empty">{__('No Content Found')}</section>} viewHiddenChannels
/> empty={<section className="main--empty">{__('No Content Found')}</section>}
/>
)}
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
<ChannelContent {currentView === PAGE.LISTS && (
claimType={'collection'} <ChannelContent
uri={uri} claimType={'collection'}
channelIsBlackListed={channelIsBlackListed} uri={uri}
viewHiddenChannels channelIsBlackListed={channelIsBlackListed}
empty={collectionEmpty} viewHiddenChannels
/> empty={collectionEmpty}
/>
)}
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
<ChannelAbout uri={uri} /> <ChannelAbout uri={uri} />