fix: file viewer refreshes when interacting (#2276)

Author: MattWong-ca

src/files/FilesPage.js

@@ -116,7 +116,7 @@ const FilesPage = ({
   }
 
   const MainView = ({ t, files, remotePins, pendingPins, failedPins, doExploreUserProvidedPath }) => {
-    if (!files) return (<div/>)
+    if (!files || files.type === 'file') return (<div/>)
 
     if (files.type === 'unknown') {
       const path = files.path
@@ -130,12 +130,6 @@ const FilesPage = ({
       )
     }
 
-    if (files.type === 'file') {
-      return (
-        <FilePreview {...files} onDownload={() => onDownload([files])} />
-      )
-    }
-
     return (
       <FilesList
         key={window.encodeURIComponent(files.path)}
@@ -216,6 +210,8 @@ const FilesPage = ({
 
       <MainView t={t} files={files} remotePins={remotePins} pendingPins={pendingPins} failedPins={failedPins} doExploreUserProvidedPath={doExploreUserProvidedPath}/>
 
+      <Preview files={files} onDownload={() => onDownload([files])} />
+
       <InfoBoxes isRoot={filesPathInfo.isMfs && filesPathInfo.isRoot}
         isCompanion={false}
         filesExist={!!(files && files.content && files.content.length)} />
@@ -248,6 +244,13 @@ const FilesPage = ({
   )
 }
 
+const Preview = ({ files, onDownload }) => {
+  if (files && files.type === 'file') {
+    return (<FilePreview {...files} onDownload={onDownload} />)
+  }
+  return (<div/>)
+}
+
 export default connect(
   'selectIpfsProvider',
   'selectIpfsConnected',