Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): memoize FloatingImageViewer

Browse Source 
Maybe this will fix @JPPhoto's issue?
This commit is contained in:
psychedelicious 2024-05-07 06:00:04 +10:00 committed by Kent Keirsey
parent 6249982d82
commit 3bd5d9a8e4
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx
View File

@ -2,7 +2,7 @@ import { Flex, IconButton, Spacer, Text, useShiftModifier } from '@invoke-ai/ui-
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import CurrentImagePreview from 'features/gallery/components/ImageViewer/CurrentImagePreview';
import { isFloatingImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
import { useCallback, useLayoutEffect, useRef } from 'react';
import { memo, useCallback, useLayoutEffect, useRef } from 'react';
import { flushSync } from 'react-dom';
import { useTranslation } from 'react-i18next';
import { PiHourglassBold, PiXBold } from 'react-icons/pi';
@ -29,7 +29,7 @@ const enableResizing = {
topLeft: false,
};
const FloatingImageViewerComponent = () => {
const FloatingImageViewerComponent = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const shift = useShiftModifier();
@ -148,9 +148,11 @@ const FloatingImageViewerComponent = () => {
</Flex>
</Rnd>
);
};
});
export const FloatingImageViewer = () => {
FloatingImageViewerComponent.displayName = 'FloatingImageViewerComponent';
export const FloatingImageViewer = memo(() => {
const isOpen = useAppSelector((s) => s.gallery.isFloatingImageViewerOpen);
if (!isOpen) {
@ -158,9 +160,11 @@ export const FloatingImageViewer = () => {
}
return <FloatingImageViewerComponent />;
};
});
export const ToggleFloatingImageViewerButton = () => {
FloatingImageViewer.displayName = 'FloatingImageViewer';
export const ToggleFloatingImageViewerButton = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const isOpen = useAppSelector((s) => s.gallery.isFloatingImageViewerOpen);
@ -181,4 +185,6 @@ export const ToggleFloatingImageViewerButton = () => {
boxSize={8}
/>
);
};
});
ToggleFloatingImageViewerButton.displayName = 'ToggleFloatingImageViewerButton';