Skip to content

Commit 3bd5d9a

Browse files
psychedelicioushipsterusername
authored andcommitted
fix(ui): memoize FloatingImageViewer
Maybe this will fix @JPPhoto's issue?
1 parent 6249982 commit 3bd5d9a

File tree

1 file changed

+13
-7
lines changed

1 file changed

+13
-7
lines changed

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Flex, IconButton, Spacer, Text, useShiftModifier } from '@invoke-ai/ui-
22
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
33
import CurrentImagePreview from 'features/gallery/components/ImageViewer/CurrentImagePreview';
44
import { isFloatingImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
5-
import { useCallback, useLayoutEffect, useRef } from 'react';
5+
import { memo, useCallback, useLayoutEffect, useRef } from 'react';
66
import { flushSync } from 'react-dom';
77
import { useTranslation } from 'react-i18next';
88
import { PiHourglassBold, PiXBold } from 'react-icons/pi';
@@ -29,7 +29,7 @@ const enableResizing = {
2929
topLeft: false,
3030
};
3131

32-
const FloatingImageViewerComponent = () => {
32+
const FloatingImageViewerComponent = memo(() => {
3333
const { t } = useTranslation();
3434
const dispatch = useAppDispatch();
3535
const shift = useShiftModifier();
@@ -148,19 +148,23 @@ const FloatingImageViewerComponent = () => {
148148
</Flex>
149149
</Rnd>
150150
);
151-
};
151+
});
152+
153+
FloatingImageViewerComponent.displayName = 'FloatingImageViewerComponent';
152154

153-
export const FloatingImageViewer = () => {
155+
export const FloatingImageViewer = memo(() => {
154156
const isOpen = useAppSelector((s) => s.gallery.isFloatingImageViewerOpen);
155157

156158
if (!isOpen) {
157159
return null;
158160
}
159161

160162
return <FloatingImageViewerComponent />;
161-
};
163+
});
162164

163-
export const ToggleFloatingImageViewerButton = () => {
165+
FloatingImageViewer.displayName = 'FloatingImageViewer';
166+
167+
export const ToggleFloatingImageViewerButton = memo(() => {
164168
const { t } = useTranslation();
165169
const dispatch = useAppDispatch();
166170
const isOpen = useAppSelector((s) => s.gallery.isFloatingImageViewerOpen);
@@ -181,4 +185,6 @@ export const ToggleFloatingImageViewerButton = () => {
181185
boxSize={8}
182186
/>
183187
);
184-
};
188+
});
189+
190+
ToggleFloatingImageViewerButton.displayName = 'ToggleFloatingImageViewerButton';

0 commit comments

Comments
 (0)