Fix sluggish Back button when navigation back to channels with lots of comments

## Issue
When navigating back and forth between a File and Channel page, the back-action will be laggy (no response) if the channel contains a lot of comments and is in the midst of resolving them.

## Changes
The "full" fix would be to batch-load comments, as this would improve the performance of fetching both Channel and File comments. For now, this commit focuses on the Back action problem only.

Skip fetching comments by not mounting 'ChannelDiscussion' until the tab is selected. I couldn't find anything in the Reach UI documentation on how to not render inactive `TabPanel`s, so I used the straight-forward state method.

CHANGELOG.md

@@ -23,6 +23,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fix channel file-search not available in mobile _community pr!_ ([#4527](https://github.com/lbryio/lbry-desktop/pull/4527))
 - New Channel: Fix incorrect GUI configuration at entry _community pr!_ ([#4545](https://github.com/lbryio/lbry-desktop/pull/4545))
 - Hide blocked channels in comments ([#4557](https://github.com/lbryio/lbry-desktop/pull/4557))
+- Fix sluggish Back button when navigation back to channels with lots of comments _community pr!_ ([#4576](https://github.com/lbryio/lbry-desktop/pull/4576))
 
 ## [0.47.0] - [2020-07-13]
 

ui/page/channel/view.jsx

@@ -70,6 +70,7 @@ function ChannelPage(props: Props) {
   const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined;
   const editInUrl = urlParams.get(PAGE_VIEW_QUERY) === EDIT_PAGE;
   const [editing, setEditing] = React.useState(editInUrl);
+  const [discussionWasMounted, setDiscussionWasMounted] = React.useState(false);
   const { channelName } = parseURI(uri);
   const { permanent_url: permanentUrl } = claim;
   const claimId = claim.claim_id;
@@ -107,6 +108,12 @@ function ChannelPage(props: Props) {
     goBack();
   }
 
+  React.useEffect(() => {
+    if (currentView === DISCUSSION_PAGE) {
+      setDiscussionWasMounted(true);
+    }
+  }, [currentView]);
+
   React.useEffect(() => {
     if (!channelIsMine && editing) {
       setEditing(false);
@@ -209,7 +216,7 @@ function ChannelPage(props: Props) {
             <ChannelAbout uri={uri} />
           </TabPanel>
           <TabPanel>
-            <ChannelDiscussion uri={uri} />
+            {(discussionWasMounted || currentView === DISCUSSION_PAGE) && <ChannelDiscussion uri={uri} />}
           </TabPanel>
         </TabPanels>
       </Tabs>