@@ -2,7 +2,7 @@ import { Flex, IconButton, Spacer, Text, useShiftModifier } from '@invoke-ai/ui-
22import { useAppDispatch , useAppSelector } from 'app/store/storeHooks' ;
33import CurrentImagePreview from 'features/gallery/components/ImageViewer/CurrentImagePreview' ;
44import { isFloatingImageViewerOpenChanged } from 'features/gallery/store/gallerySlice' ;
5- import { useCallback , useLayoutEffect , useRef } from 'react' ;
5+ import { memo , useCallback , useLayoutEffect , useRef } from 'react' ;
66import { flushSync } from 'react-dom' ;
77import { useTranslation } from 'react-i18next' ;
88import { 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