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 {
ControlNetConfig,
@ -17,8 +17,8 @@ import { useHoverDirty } from 'react-use';
const selector = createSelector(
controlNetSelector,
(controlNet) => {
const { isProcessingControlImage } = controlNet;
return { isProcessingControlImage };
const { pendingControlImages } = controlNet;
return { pendingControlImages };
},
defaultSelectorOptions
);
@ -31,7 +31,7 @@ const ControlNetImagePreview = (props: Props) => {
const { controlNetId, controlImage, processedControlImage, processorType } =
props.controlNet;
const dispatch = useAppDispatch();
const { isProcessingControlImage } = useAppSelector(selector);
const { pendingControlImages } = useAppSelector(selector);
const containerRef = useRef<HTMLDivElement>(null);
const isMouseOverImage = useHoverDirty(containerRef);
@ -56,7 +56,7 @@ const ControlNetImagePreview = (props: Props) => {
controlImage &&
processedControlImage &&
!isMouseOverImage &&
!isProcessingControlImage &&
!pendingControlImages.includes(controlNetId) &&
processorType !== 'none';
return (
@ -124,7 +124,7 @@ const ControlNetImagePreview = (props: Props) => {
</motion.div>
)}
</AnimatePresence>
{isProcessingControlImage && (
{pendingControlImages.includes(controlNetId) && (
<Box
sx={{
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
*/
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 = {
controlNets: Record<string, ControlNetConfig>;
isEnabled: boolean;
isProcessingControlImage: boolean;
pendingControlImages: string[];
};
export const initialControlNetState: ControlNetState = {
controlNets: {},
isEnabled: false,
isProcessingControlImage: false,
pendingControlImages: [],
};
export const controlNetSlice = createSlice({
@ -115,7 +115,7 @@ export const controlNetSlice = createSlice({
controlImage !== null &&
state.controlNets[controlNetId].processorType !== 'none'
) {
state.isProcessingControlImage = true;
state.pendingControlImages.push(controlNetId);
}
},
controlNetProcessedImageChanged: (
@ -128,7 +128,9 @@ export const controlNetSlice = createSlice({
const { controlNetId, processedControlImage } = action.payload;
state.controlNets[controlNetId].processedControlImage =
processedControlImage;
state.isProcessingControlImage = false;
state.pendingControlImages = state.pendingControlImages.filter(
(id) => id !== controlNetId
);
},
controlNetModelChanged: (
state,
@ -207,7 +209,7 @@ export const controlNetSlice = createSlice({
if (
state.controlNets[action.payload.controlNetId].controlImage !== null
) {
state.isProcessingControlImage = true;
state.pendingControlImages.push(action.payload.controlNetId);
}
});