PreviewDialog: prevent render of preview when fs is reloaded

Also: updated react-doc-preview to the latest version.
warpdesign · Apr 26, 2024 · ef07455 · ef07455
1 parent 0ac54dc
commit ef07455
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -138,7 +138,7 @@
         "react": "^16.9.0",
         "react-dnd": "^14.0.5",
         "react-dnd-html5-backend": "^14.1.0",
-        "react-doc-viewer": "git+https://git@github.com/warpdesign/react-doc-viewer.git#release",
+        "react-doc-viewer": "github:warpdesign/react-doc-viewer#release",
         "react-dom": "^16.9.0",
         "react-i18next": "^12.0.0",
         "react-virtual": "^2.10.4"

diff --git a/src/components/dialogs/PreviewDialog.tsx b/src/components/dialogs/PreviewDialog.tsx
@@ -2,7 +2,7 @@ import React, { KeyboardEvent as KE, ReactNode, useCallback, useEffect, useMemo,
 import { useStores } from '$src/hooks/useStores'
 import { Button, Classes, Colors, Dialog, Icon } from '@blueprintjs/core'
 import { observer } from 'mobx-react'
-import DocViewer, { DocViewerRenderers } from 'react-doc-viewer'
+import DocViewer, { DocViewerRenderers, IConfig } from 'react-doc-viewer'
 import { TypeIcons } from '$src/constants/icons'
 import { formatBytes } from '$src/utils/formatBytes'
 import { FileDescriptor } from '$src/services/Fs'
@@ -93,6 +93,20 @@ export const PreviewDialog = observer(() => {
         )
     }
 
+    // pre-calculate config to prevent unncessary re-rendering of the preview
+    const viewerConfig: IConfig = useMemo(
+        () => ({
+            header: {
+                disableHeader: true,
+            },
+            noRenderer: {
+                overrideComponent: NoPreviewRenderer,
+            },
+            txtCodeTheme: settingsState.isDarkModeActive ? 'nord' : 'xcode',
+        }),
+        [],
+    )
+
     return (
         cache.cursor && (
             <Dialog
@@ -107,15 +121,7 @@ export const PreviewDialog = observer(() => {
                         style={{
                             maxHeight: '80vh',
                         }}
-                        config={{
-                            header: {
-                                disableHeader: true,
-                            },
-                            noRenderer: {
-                                overrideComponent: NoPreviewRenderer,
-                            },
-                            txtCodeTheme: settingsState.isDarkModeActive ? 'nord' : 'xcode',
-                        }}
+                        config={viewerConfig}
                         documents={docs}
                         initialActiveDocument={activeDocument}
                         activeDocument={activeDocument}