From 077207e20374a8d27cdf6409b94e4ec49a5e7abe Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 23 Jul 2021 14:47:28 +0800
Subject: [PATCH] ChannelPage: Don't mount inactive ChannelContent

## 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.
---
 ui/page/channel/view.jsx | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/ui/page/channel/view.jsx b/ui/page/channel/view.jsx
index 236a0b3f7..e05afa378 100644
--- a/ui/page/channel/view.jsx
+++ b/ui/page/channel/view.jsx
@@ -87,7 +87,7 @@ function ChannelPage(props: Props) {
   } = useHistory();
   const [viewBlockedChannel, setViewBlockedChannel] = React.useState(false);
   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 editing = urlParams.get(PAGE_VIEW_QUERY) === PAGE.EDIT;
   const { channelName } = parseURI(uri);
@@ -288,21 +288,25 @@ function ChannelPage(props: Props) {
           </TabList>
           <TabPanels>
             <TabPanel>
-              <ChannelContent
-                uri={uri}
-                channelIsBlackListed={channelIsBlackListed}
-                viewHiddenChannels
-                empty={<section className="main--empty">{__('No Content Found')}</section>}
-              />
+              {currentView === PAGE.CONTENT && (
+                <ChannelContent
+                  uri={uri}
+                  channelIsBlackListed={channelIsBlackListed}
+                  viewHiddenChannels
+                  empty={<section className="main--empty">{__('No Content Found')}</section>}
+                />
+              )}
             </TabPanel>
             <TabPanel>
-              <ChannelContent
-                claimType={'collection'}
-                uri={uri}
-                channelIsBlackListed={channelIsBlackListed}
-                viewHiddenChannels
-                empty={collectionEmpty}
-              />
+              {currentView === PAGE.LISTS && (
+                <ChannelContent
+                  claimType={'collection'}
+                  uri={uri}
+                  channelIsBlackListed={channelIsBlackListed}
+                  viewHiddenChannels
+                  empty={collectionEmpty}
+                />
+              )}
             </TabPanel>
             <TabPanel>
               <ChannelAbout uri={uri} />