diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts index 1d5eab8f7e..c54e8ea560 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts @@ -7,7 +7,6 @@ import { setStageCoordinates, } from 'features/canvas/store/canvasSlice'; import { KonvaEventObject } from 'konva/lib/Node'; -import { isEqual } from 'lodash-es'; import { useCallback } from 'react'; const selector = createMemoizedSelector( @@ -19,8 +18,7 @@ const selector = createMemoizedSelector( isStaging, isMovingBoundingBox, }; - }, - { memoizeOptions: { resultEqualityCheck: isEqual } } + } ); const useCanvasDrag = () => { diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts index 1f8970af4c..ff58079bdc 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts @@ -11,7 +11,6 @@ import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPositio import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import Konva from 'konva'; import { KonvaEventObject } from 'konva/lib/Node'; -import { isEqual } from 'lodash-es'; import { MutableRefObject, useCallback } from 'react'; import useColorPicker from './useColorUnderCursor'; @@ -24,8 +23,7 @@ const selector = createMemoizedSelector( activeTabName, isStaging, }; - }, - { memoizeOptions: { resultEqualityCheck: isEqual } } + } ); const useCanvasMouseDown = (stageRef: MutableRefObject) => { diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts index 68e9cd808f..9d73dab0a7 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts @@ -10,7 +10,6 @@ import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPositio import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import Konva from 'konva'; import { Vector2d } from 'konva/lib/types'; -import { isEqual } from 'lodash-es'; import { MutableRefObject, useCallback } from 'react'; import useColorPicker from './useColorUnderCursor'; @@ -24,8 +23,7 @@ const selector = createMemoizedSelector( activeTabName, isStaging, }; - }, - { memoizeOptions: { resultEqualityCheck: isEqual } } + } ); const useCanvasMouseMove = ( diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts index e534d211da..1fcd81aaab 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts @@ -11,7 +11,6 @@ import { import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import Konva from 'konva'; -import { isEqual } from 'lodash-es'; import { MutableRefObject, useCallback } from 'react'; const selector = createMemoizedSelector( @@ -24,8 +23,7 @@ const selector = createMemoizedSelector( activeTabName, isStaging, }; - }, - { memoizeOptions: { resultEqualityCheck: isEqual } } + } ); const useCanvasMouseUp = ( diff --git a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts index 8dac898d8c..aa98470dca 100644 --- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts +++ b/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts @@ -12,20 +12,16 @@ import { } from 'features/canvas/util/constants'; import Konva from 'konva'; import { KonvaEventObject } from 'konva/lib/Node'; -import { clamp, isEqual } from 'lodash-es'; +import { clamp } from 'lodash-es'; import { MutableRefObject, useCallback } from 'react'; -const selector = createMemoizedSelector( - [stateSelector], - ({ canvas }) => { - const { isMoveStageKeyHeld, stageScale } = canvas; - return { - isMoveStageKeyHeld, - stageScale, - }; - }, - { memoizeOptions: { resultEqualityCheck: isEqual } } -); +const selector = createMemoizedSelector([stateSelector], ({ canvas }) => { + const { isMoveStageKeyHeld, stageScale } = canvas; + return { + isMoveStageKeyHeld, + stageScale, + }; +}); const useCanvasWheel = (stageRef: MutableRefObject) => { const dispatch = useAppDispatch(); diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx index db5a3e02cf..ee76fa545b 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Image } from '@chakra-ui/react'; +import { Box, Flex } from '@chakra-ui/react'; import { skipToken } from '@reduxjs/toolkit/query'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { stateSelector } from 'app/store/store'; @@ -9,6 +9,7 @@ import { TypesafeDraggableData, TypesafeDroppableData, } from 'features/dnd/types'; +import ProgressImage from 'features/gallery/components/CurrentImage/ProgressImage'; import ImageMetadataViewer from 'features/gallery/components/ImageMetadataViewer/ImageMetadataViewer'; import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons'; import { useNextPrevImage } from 'features/gallery/hooks/useNextPrevImage'; @@ -28,14 +29,13 @@ export const imagesSelector = createMemoizedSelector( shouldHidePreview, shouldShowProgressInViewer, } = ui; - const { denoiseProgress, shouldAntialiasProgressImage } = system; + const { denoiseProgress } = system; return { shouldShowImageDetails, shouldHidePreview, imageName: lastSelectedImage?.image_name, - denoiseProgress, + hasDenoiseProgress: Boolean(denoiseProgress), shouldShowProgressInViewer, - shouldAntialiasProgressImage, }; } ); @@ -44,9 +44,8 @@ const CurrentImagePreview = () => { const { shouldShowImageDetails, imageName, - denoiseProgress, + hasDenoiseProgress, shouldShowProgressInViewer, - shouldAntialiasProgressImage, } = useAppSelector(imagesSelector); const { @@ -137,23 +136,8 @@ const CurrentImagePreview = () => { position: 'relative', }} > - {denoiseProgress?.progress_image && shouldShowProgressInViewer ? ( - + {hasDenoiseProgress && shouldShowProgressInViewer ? ( + ) : ( { + const progress_image = useAppSelector( + (state) => state.system.denoiseProgress?.progress_image + ); + const shouldAntialiasProgressImage = useAppSelector( + (state) => state.system.shouldAntialiasProgressImage + ); + + if (!progress_image) { + return null; + } + + return ( + + ); +}; + +export default memo(CurrentImagePreview); diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx index 4b8622d3f9..0591ca51e1 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx @@ -38,7 +38,6 @@ import { setShouldShowProgressInViewer, setShouldUseSliders, } from 'features/ui/store/uiSlice'; -import { isEqual } from 'lodash-es'; import { ChangeEvent, ReactElement, @@ -56,44 +55,38 @@ import SettingsClearIntermediates from './SettingsClearIntermediates'; import SettingsSchedulers from './SettingsSchedulers'; import StyledFlex from './StyledFlex'; -const selector = createMemoizedSelector( - [stateSelector], - ({ system, ui }) => { - const { - shouldConfirmOnDelete, - enableImageDebugging, - consoleLogLevel, - shouldLogToConsole, - shouldAntialiasProgressImage, - shouldUseNSFWChecker, - shouldUseWatermarker, - shouldEnableInformationalPopovers, - } = system; +const selector = createMemoizedSelector([stateSelector], ({ system, ui }) => { + const { + shouldConfirmOnDelete, + enableImageDebugging, + consoleLogLevel, + shouldLogToConsole, + shouldAntialiasProgressImage, + shouldUseNSFWChecker, + shouldUseWatermarker, + shouldEnableInformationalPopovers, + } = system; - const { - shouldUseSliders, - shouldShowProgressInViewer, - shouldAutoChangeDimensions, - } = ui; + const { + shouldUseSliders, + shouldShowProgressInViewer, + shouldAutoChangeDimensions, + } = ui; - return { - shouldConfirmOnDelete, - enableImageDebugging, - shouldUseSliders, - shouldShowProgressInViewer, - consoleLogLevel, - shouldLogToConsole, - shouldAntialiasProgressImage, - shouldUseNSFWChecker, - shouldUseWatermarker, - shouldAutoChangeDimensions, - shouldEnableInformationalPopovers, - }; - }, - { - memoizeOptions: { resultEqualityCheck: isEqual }, - } -); + return { + shouldConfirmOnDelete, + enableImageDebugging, + shouldUseSliders, + shouldShowProgressInViewer, + consoleLogLevel, + shouldLogToConsole, + shouldAntialiasProgressImage, + shouldUseNSFWChecker, + shouldUseWatermarker, + shouldAutoChangeDimensions, + shouldEnableInformationalPopovers, + }; +}); type ConfigOptions = { shouldShowDeveloperSettings: boolean; diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx index b63a94f302..f513e4ae9f 100644 --- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx +++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx @@ -23,7 +23,6 @@ import { } from 'features/ui/store/uiSelectors'; import { setActiveTab } from 'features/ui/store/uiSlice'; import { ResourceKey } from 'i18next'; -import { isEqual } from 'lodash-es'; import { MouseEvent, ReactNode, memo, useCallback, useMemo } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; @@ -96,9 +95,6 @@ const enabledTabsSelector = createMemoizedSelector( const { disabledTabs } = config; const enabledTabs = tabs.filter((tab) => !disabledTabs.includes(tab.id)); return enabledTabs; - }, - { - memoizeOptions: { resultEqualityCheck: isEqual }, } );