diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx index 629f01e8fd..91d668f1e2 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx @@ -6,13 +6,13 @@ import { Divider, Flex, Text } from '@chakra-ui/react'; import { useForm } from '@mantine/form'; import { useTranslation } from 'react-i18next'; -import type { RootState } from 'app/store/store'; import IAIButton from 'common/components/IAIButton'; import IAIMantineSelect from 'common/components/IAIMantineSelect'; import { makeToast } from 'app/components/Toaster'; import IAIMantineTextInput from 'common/components/IAIMantineInput'; import { MODEL_TYPE_MAP } from 'features/parameters/types/constants'; +import { selectIsBusy } from 'features/system/store/systemSelectors'; import { addToast } from 'features/system/store/systemSlice'; import { useUpdateMainModelsMutation } from 'services/api/endpoints/models'; import { components } from 'services/api/schema'; @@ -39,9 +39,7 @@ type CheckpointModelEditProps = { }; export default function CheckpointModelEdit(props: CheckpointModelEditProps) { - const isProcessing = useAppSelector( - (state: RootState) => state.system.isProcessing - ); + const isBusy = useAppSelector(selectIsBusy); const { modelToEdit, retrievedModel } = props; @@ -153,8 +151,8 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) { {...checkpointEditForm.getInputProps('config')} /> <IAIButton - disabled={isProcessing} type="submit" + isDisabled={isBusy || isLoading} isLoading={isLoading} > {t('modelManager.updateModel')} diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx index 0bf3d87838..65793c9d2c 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx @@ -7,12 +7,12 @@ import { useTranslation } from 'react-i18next'; import { useForm } from '@mantine/form'; import { makeToast } from 'app/components/Toaster'; -import type { RootState } from 'app/store/store'; import IAIButton from 'common/components/IAIButton'; import IAIMantineTextInput from 'common/components/IAIMantineInput'; import IAIMantineSelect from 'common/components/IAIMantineSelect'; import { MODEL_TYPE_MAP } from 'features/parameters/types/constants'; +import { selectIsBusy } from 'features/system/store/systemSelectors'; import { addToast } from 'features/system/store/systemSlice'; import { useUpdateMainModelsMutation } from 'services/api/endpoints/models'; import { components } from 'services/api/schema'; @@ -38,9 +38,8 @@ const variantSelectData = [ ]; export default function DiffusersModelEdit(props: DiffusersModelEditProps) { - const isProcessing = useAppSelector( - (state: RootState) => state.system.isProcessing - ); + const isBusy = useAppSelector(selectIsBusy); + const { retrievedModel, modelToEdit } = props; const [updateMainModel, { isLoading, error }] = useUpdateMainModelsMutation(); @@ -138,8 +137,8 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) { {...diffusersEditForm.getInputProps('vae')} /> <IAIButton - disabled={isProcessing} type="submit" + isDisabled={isBusy || isLoading} isLoading={isLoading} > {t('modelManager.updateModel')} diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx index 993602da4c..5a90327aa3 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx @@ -13,6 +13,7 @@ import { RootState } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIAlertDialog from 'common/components/IAIAlertDialog'; import IAIIconButton from 'common/components/IAIIconButton'; +import { selectIsBusy } from 'features/system/store/systemSelectors'; import { setOpenModel } from 'features/system/store/systemSlice'; import { useTranslation } from 'react-i18next'; import { useDeleteMainModelsMutation } from 'services/api/endpoints/models'; @@ -26,9 +27,7 @@ type ModelListItemProps = { }; export default function ModelListItem(props: ModelListItemProps) { - const { isProcessing, isConnected } = useAppSelector( - (state: RootState) => state.system - ); + const isBusy = useAppSelector(selectIsBusy); const { colorMode } = useColorMode(); @@ -89,7 +88,7 @@ export default function ModelListItem(props: ModelListItemProps) { size="sm" onClick={openModelHandler} aria-label={t('accessibility.modifyConfig')} - isDisabled={status === 'active' || isProcessing || !isConnected} + isDisabled={isBusy} /> <IAIAlertDialog title={t('modelManager.deleteModel')} @@ -100,7 +99,7 @@ export default function ModelListItem(props: ModelListItemProps) { icon={<DeleteIcon />} size="sm" aria-label={t('modelManager.deleteConfig')} - isDisabled={status === 'active' || isProcessing || !isConnected} + isDisabled={isBusy} colorScheme="error" /> }