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): only show loading indicator on processing control images

Browse Source
This commit is contained in:
psychedelicious 2023-06-06 21:12:07 +10:00
parent 00eabf630d
commit f223ad7776
3 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
View File

@ -1,4 +1,4 @@
import { memo, useCallback, useRef, useState } from 'react'; import { memo, useCallback, useRef } from 'react';
import { ImageDTO } from 'services/api'; import { ImageDTO } from 'services/api';
import { import {
ControlNetConfig, ControlNetConfig,
@ -17,8 +17,8 @@ import { useHoverDirty } from 'react-use';
const selector = createSelector( const selector = createSelector(
controlNetSelector, controlNetSelector,
(controlNet) => { (controlNet) => {
const { isProcessingControlImage } = controlNet; const { pendingControlImages } = controlNet;
return { isProcessingControlImage }; return { pendingControlImages };
}, },
defaultSelectorOptions defaultSelectorOptions
); );
@ -31,7 +31,7 @@ const ControlNetImagePreview = (props: Props) => {
const { controlNetId, controlImage, processedControlImage, processorType } = const { controlNetId, controlImage, processedControlImage, processorType } =
props.controlNet; props.controlNet;
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { isProcessingControlImage } = useAppSelector(selector); const { pendingControlImages } = useAppSelector(selector);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const isMouseOverImage = useHoverDirty(containerRef); const isMouseOverImage = useHoverDirty(containerRef);
@ -56,7 +56,7 @@ const ControlNetImagePreview = (props: Props) => {
controlImage && controlImage &&
processedControlImage && processedControlImage &&
!isMouseOverImage && !isMouseOverImage &&
!isProcessingControlImage && !pendingControlImages.includes(controlNetId) &&
processorType !== 'none'; processorType !== 'none';
return ( return (
@ -124,7 +124,7 @@ const ControlNetImagePreview = (props: Props) => {
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
{isProcessingControlImage && ( {pendingControlImages.includes(controlNetId) && (
<Box <Box
sx={{ sx={{
position: 'absolute', position: 'absolute',

2
invokeai/frontend/web/src/features/controlNet/store/controlNetDenylist.ts
View File

@ -4,5 +4,5 @@ import { ControlNetState } from './controlNetSlice';
* ControlNet slice persist denylist * ControlNet slice persist denylist
*/ */
export const controlNetDenylist: (keyof ControlNetState)[] = [ export const controlNetDenylist: (keyof ControlNetState)[] = [
'isProcessingControlImage', 'pendingControlImages',
]; ];

12
invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts
View File

@ -46,13 +46,13 @@ export type ControlNetConfig = {
export type ControlNetState = { export type ControlNetState = {
controlNets: Record<string, ControlNetConfig>; controlNets: Record<string, ControlNetConfig>;
isEnabled: boolean; isEnabled: boolean;
isProcessingControlImage: boolean; pendingControlImages: string[];
}; };
export const initialControlNetState: ControlNetState = { export const initialControlNetState: ControlNetState = {
controlNets: {}, controlNets: {},
isEnabled: false, isEnabled: false,
isProcessingControlImage: false, pendingControlImages: [],
}; };
export const controlNetSlice = createSlice({ export const controlNetSlice = createSlice({
@ -115,7 +115,7 @@ export const controlNetSlice = createSlice({
controlImage !== null && controlImage !== null &&
state.controlNets[controlNetId].processorType !== 'none' state.controlNets[controlNetId].processorType !== 'none'
) { ) {
state.isProcessingControlImage = true; state.pendingControlImages.push(controlNetId);
} }
}, },
controlNetProcessedImageChanged: ( controlNetProcessedImageChanged: (
@ -128,7 +128,9 @@ export const controlNetSlice = createSlice({
const { controlNetId, processedControlImage } = action.payload; const { controlNetId, processedControlImage } = action.payload;
state.controlNets[controlNetId].processedControlImage = state.controlNets[controlNetId].processedControlImage =
processedControlImage; processedControlImage;
state.isProcessingControlImage = false; state.pendingControlImages = state.pendingControlImages.filter(
(id) => id !== controlNetId
);
}, },
controlNetModelChanged: ( controlNetModelChanged: (
state, state,
@ -207,7 +209,7 @@ export const controlNetSlice = createSlice({
if ( if (
state.controlNets[action.payload.controlNetId].controlImage !== null state.controlNets[action.payload.controlNetId].controlImage !== null
) { ) {
state.isProcessingControlImage = true; state.pendingControlImages.push(action.payload.controlNetId);
} }
}); });