fix image editor flickering (#558)

Co-authored-by: ole1711 <42774821+ole1711@users.noreply.github.com>
hpi-swa-lab · Jun 15, 2023 · b73b968 · b73b968
1 parent ddee649
commit b73b968
Showing 1 changed file with 18 additions and 16 deletions.
diff --git a/projects/bp-gallery/src/components/views/picture/sidebar/picture-info/PictureEditDialog.tsx b/projects/bp-gallery/src/components/views/picture/sidebar/picture-info/PictureEditDialog.tsx
@@ -2,7 +2,7 @@ import { useApolloClient } from '@apollo/client';
 import { Close, Save } from '@mui/icons-material';
 import { AppBar, Button, Dialog, DialogContent, Toolbar, Typography } from '@mui/material';
 import dayjs from 'dayjs';
-import { memo, useCallback, useContext, useRef } from 'react';
+import { memo, useCallback, useContext, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import type TuiImageEditor from 'tui-image-editor';
 import { asUploadPath } from '../../../../../helpers/app-helpers';
@@ -30,6 +30,22 @@ const PictureEditDialog = memo(function PictureEditDialog({
   const apolloClient = useApolloClient();
   const { calledViaLink } = useContext(PictureViewContext);
 
+  const editorOptions = useMemo(
+    () => ({
+      usageStatistics: false,
+      includeUI: {
+        loadImage: {
+          path: asUploadPath(picture.media),
+          name: 'SampleImage',
+        },
+        initMenu: 'crop',
+        menu: ['crop', 'rotate', 'flip', 'filter'],
+        menuBarPosition: 'right',
+      },
+    }),
+    [picture.media]
+  );
+
   const save = useCallback(async () => {
     if (!picture.media?.id || !editorRef.current) {
       return;
@@ -89,21 +105,7 @@ const PictureEditDialog = memo(function PictureEditDialog({
         </Toolbar>
       </AppBar>
       <DialogContent>
-        <ImageEditor
-          editorRef={editorRef}
-          options={{
-            usageStatistics: false,
-            includeUI: {
-              loadImage: {
-                path: asUploadPath(picture.media),
-                name: 'SampleImage',
-              },
-              initMenu: 'crop',
-              menu: ['crop', 'rotate', 'flip', 'filter'],
-              menuBarPosition: 'right',
-            },
-          }}
-        />
+        <ImageEditor editorRef={editorRef} options={editorOptions} />
       </DialogContent>
     </Dialog>
   );