Web: Fix 'Download' not triggering until second attempt

## Issue
4669: `Download doesn't trigger on web until 2nd attempt`

The issue only happens when _Autoplay_ is disabled in the User Settings and the video hasn't been loaded when _Download_ is clicked.

The following code:
   `if (didClickDownloadButton && streamingUrl)`
didn't triggered because:
1. `streamingUrl` has not resolved yet when the Effect ran.
2. When it did resolve, the parent component was also notified and unmounted things, causing `didClickDownloadButton` to reset.

## Approach
Avoid the unnecessary unmounting by not using a conditional section wrapper within a return statement. React probably couldn't do the diffs when the conditional is at a section level.

CHANGELOG.md

@@ -26,6 +26,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fix related + search results loading slowly ([#4657](https://github.com/lbryio/lbry-desktop/pull/4657))
 - Fix partially untranslated text in the Upgrade Modal _community pr!_ ([#4722](https://github.com/lbryio/lbry-desktop/pull/4722))
 - Fix floating player being paused after dragging _community pr!_ ([#4710](https://github.com/lbryio/lbry-desktop/pull/4710))
+- Web: Fix 'Download' not triggering until second attempt _community pr!_ ([#4721](https://github.com/lbryio/lbry-desktop/pull/4721))
 
 ## [0.47.1] - [2020-07-23]
 

ui/component/fileActions/view.jsx

@@ -1,5 +1,4 @@
 // @flow
-import type { Node } from 'react';
 import { SIMPLE_SITE } from 'config';
 import * as PAGES from 'constants/pages';
 import * as CS from 'constants/claim_search';
@@ -48,16 +47,8 @@ function FileActions(props: Props) {
     editUri = buildURI(uriObject);
   }
 
-  const ActionWrapper = (props: { children: Node }) =>
+  const lhsSection = (
-    isMobile ? (
+    <>
-      <React.Fragment>{props.children}</React.Fragment>
-    ) : (
-      <div className="section__actions section__actions--no-margin">{props.children}</div>
-    );
-
-  return (
-    <div className="media__actions">
-      <ActionWrapper>
       <Button
         button="alt"
         icon={ICONS.SHARE}
@@ -85,9 +76,11 @@ function FileActions(props: Props) {
         </div>
       )}
       <ClaimSupportButton uri={uri} />
-      </ActionWrapper>
+    </>
+  );
 
-      <ActionWrapper>
+  const rhsSection = (
+    <>
       {!SIMPLE_SITE && <FileDownloadLink uri={uri} />}
 
       {claimIsMine && (
@@ -119,9 +112,24 @@ function FileActions(props: Props) {
           href={`https://lbry.com/dmca/${claimId}`}
         />
       )}
-      </ActionWrapper>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <div className="media__actions">
+        {lhsSection}
+        {rhsSection}
+      </div>
+    );
+  } else {
+    return (
+      <div className="media__actions">
+        <div className="section__actions section__actions--no-margin">{lhsSection}</div>
+        <div className="section__actions section__actions--no-margin">{rhsSection}</div>
       </div>
     );
   }
+}
 
 export default FileActions;