block auto add board change during generation. Switch condition to isProcessing

invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx

@@ -11,11 +11,14 @@ import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
 
 const selector = createSelector(
   [stateSelector],
-  ({ gallery }) => {
+  ({ gallery, system }) => {
-    const { autoAddBoardId } = gallery;
+    const { autoAddBoardId, autoAssignBoardOnClick } = gallery;
+    const { isProcessing } = system;
 
     return {
       autoAddBoardId,
+      autoAssignBoardOnClick,
+      isProcessing,
     };
   },
   defaultSelectorOptions
@@ -23,7 +26,8 @@ const selector = createSelector(
 
 const BoardAutoAddSelect = () => {
   const dispatch = useAppDispatch();
-  const { autoAddBoardId } = useAppSelector(selector);
+  const { autoAddBoardId, autoAssignBoardOnClick, isProcessing } =
+    useAppSelector(selector);
   const inputRef = useRef<HTMLInputElement>(null);
   const { boards, hasBoards } = useListAllBoardsQuery(undefined, {
     selectFromResult: ({ data }) => {
@@ -67,7 +71,7 @@ const BoardAutoAddSelect = () => {
       data={boards}
       nothingFound="No matching Boards"
       itemComponent={IAIMantineSelectItemWithTooltip}
-      disabled={!hasBoards}
+      disabled={!hasBoards || autoAssignBoardOnClick || isProcessing}
       filter={(value, item: SelectItem) =>
         item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
         item.value.toLowerCase().includes(value.toLowerCase().trim())

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx

@@ -27,7 +27,6 @@ import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import { BoardDTO } from 'services/api/types';
 import AutoAddIcon from '../AutoAddIcon';
 import BoardContextMenu from '../BoardContextMenu';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
 interface GalleryBoardProps {
   board: BoardDTO;
@@ -42,19 +41,24 @@ const GalleryBoard = memo(
       () =>
         createSelector(
           stateSelector,
-          ({ gallery }) => {
+          ({ gallery, system }) => {
             const isSelectedForAutoAdd =
               board.board_id === gallery.autoAddBoardId;
             const autoAssignBoardOnClick = gallery.autoAssignBoardOnClick;
+            const isProcessing = system.isProcessing;
 
-            return { isSelectedForAutoAdd, autoAssignBoardOnClick };
+            return {
+              isSelectedForAutoAdd,
+              autoAssignBoardOnClick,
+              isProcessing,
+            };
           },
           defaultSelectorOptions
         ),
       [board.board_id]
     );
 
-    const { isSelectedForAutoAdd, autoAssignBoardOnClick } =
+    const { isSelectedForAutoAdd, autoAssignBoardOnClick, isProcessing } =
       useAppSelector(selector);
     const [isHovered, setIsHovered] = useState(false);
     const handleMouseOver = useCallback(() => {
@@ -70,14 +74,12 @@ const GalleryBoard = memo(
     const { board_name, board_id } = board;
     const [localBoardName, setLocalBoardName] = useState(board_name);
 
-    const isReady = useIsReadyToInvoke();
-
     const handleSelectBoard = useCallback(() => {
       dispatch(boardIdSelected(board_id));
-      if (autoAssignBoardOnClick && isReady) {
+      if (autoAssignBoardOnClick && !isProcessing) {
         dispatch(autoAddBoardIdChanged(board_id));
       }
-    }, [board_id, autoAssignBoardOnClick, isReady, dispatch]);
+    }, [board_id, autoAssignBoardOnClick, isProcessing, dispatch]);
 
     const [updateBoard, { isLoading: isUpdateBoardLoading }] =
       useUpdateBoardMutation();

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx

@@ -15,31 +15,31 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 import AutoAddIcon from '../AutoAddIcon';
 import BoardContextMenu from '../BoardContextMenu';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 interface Props {
   isSelected: boolean;
 }
 
 const selector = createSelector(
   stateSelector,
-  ({ gallery }) => {
+  ({ gallery, system }) => {
     const { autoAddBoardId, autoAssignBoardOnClick } = gallery;
-    return { autoAddBoardId, autoAssignBoardOnClick };
+    const { isProcessing } = system;
+    return { autoAddBoardId, autoAssignBoardOnClick, isProcessing };
   },
   defaultSelectorOptions
 );
 
 const NoBoardBoard = memo(({ isSelected }: Props) => {
   const dispatch = useAppDispatch();
-  const { autoAddBoardId, autoAssignBoardOnClick } = useAppSelector(selector);
+  const { autoAddBoardId, autoAssignBoardOnClick, isProcessing } =
+    useAppSelector(selector);
   const boardName = useBoardName(undefined);
-  const isReady = useIsReadyToInvoke();
   const handleSelectBoard = useCallback(() => {
     dispatch(boardIdSelected(undefined));
-    if (autoAssignBoardOnClick && isReady) {
+    if (autoAssignBoardOnClick && !isProcessing) {
       dispatch(autoAddBoardIdChanged(undefined));
     }
-  }, [dispatch, autoAssignBoardOnClick, isReady]);
+  }, [dispatch, autoAssignBoardOnClick, isProcessing]);
   const [isHovered, setIsHovered] = useState(false);
   const handleMouseOver = useCallback(() => {
     setIsHovered(true);

invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx

@@ -82,7 +82,7 @@ const GallerySettingsPopover = () => {
             dispatch(autoAssignBoardOnClickChanged(e.target.checked))
           }
         />
-        {!autoAssignBoardOnClick && <BoardAutoAddSelect />}
+        <BoardAutoAddSelect />
       </Flex>
     </IAIPopover>
   );