auto change board waiting for isReady

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

@@ -16,7 +16,10 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIDroppable from 'common/components/IAIDroppable';
 import SelectionOverlay from 'common/components/SelectionOverlay';
-import { boardIdSelected } from 'features/gallery/store/gallerySlice';
+import {
+  autoAddBoardIdChanged,
+  boardIdSelected,
+} from 'features/gallery/store/gallerySlice';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { FaUser } from 'react-icons/fa';
 import { useUpdateBoardMutation } from 'services/api/endpoints/boards';
@@ -24,6 +27,7 @@ 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;
@@ -41,15 +45,17 @@ const GalleryBoard = memo(
           ({ gallery }) => {
             const isSelectedForAutoAdd =
               board.board_id === gallery.autoAddBoardId;
+            const autoAssignBoardOnClick = gallery.autoAssignBoardOnClick;
 
-            return { isSelectedForAutoAdd };
+            return { isSelectedForAutoAdd, autoAssignBoardOnClick };
           },
           defaultSelectorOptions
         ),
       [board.board_id]
     );
 
-    const { isSelectedForAutoAdd } = useAppSelector(selector);
+    const { isSelectedForAutoAdd, autoAssignBoardOnClick } =
+      useAppSelector(selector);
     const [isHovered, setIsHovered] = useState(false);
     const handleMouseOver = useCallback(() => {
       setIsHovered(true);
@@ -64,9 +70,14 @@ 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));
-    }, [board_id, dispatch]);
+      if (autoAssignBoardOnClick && isReady) {
+        dispatch(autoAddBoardIdChanged(board_id));
+      }
+    }, [board_id, autoAssignBoardOnClick, isReady, dispatch]);
 
     const [updateBoard, { isLoading: isUpdateBoardLoading }] =
       useUpdateBoardMutation();

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

@@ -7,11 +7,15 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import InvokeAILogoImage from 'assets/images/logo.png';
 import IAIDroppable from 'common/components/IAIDroppable';
 import SelectionOverlay from 'common/components/SelectionOverlay';
-import { boardIdSelected } from 'features/gallery/store/gallerySlice';
+import {
+  boardIdSelected,
+  autoAddBoardIdChanged,
+} from 'features/gallery/store/gallerySlice';
 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;
 }
@@ -19,19 +23,23 @@ interface Props {
 const selector = createSelector(
   stateSelector,
   ({ gallery }) => {
-    const { autoAddBoardId } = gallery;
-    return { autoAddBoardId };
+    const { autoAddBoardId, autoAssignBoardOnClick } = gallery;
+    return { autoAddBoardId, autoAssignBoardOnClick };
   },
   defaultSelectorOptions
 );
 
 const NoBoardBoard = memo(({ isSelected }: Props) => {
   const dispatch = useAppDispatch();
-  const { autoAddBoardId } = useAppSelector(selector);
+  const { autoAddBoardId, autoAssignBoardOnClick } = useAppSelector(selector);
   const boardName = useBoardName(undefined);
+  const isReady = useIsReadyToInvoke();
   const handleSelectBoard = useCallback(() => {
     dispatch(boardIdSelected(undefined));
-  }, [dispatch]);
+    if (autoAssignBoardOnClick && isReady) {
+      dispatch(autoAddBoardIdChanged(undefined));
+    }
+  }, [dispatch, autoAssignBoardOnClick, isReady]);
   const [isHovered, setIsHovered] = useState(false);
   const handleMouseOver = useCallback(() => {
     setIsHovered(true);

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -73,7 +73,6 @@ export const gallerySlice = createSlice({
     boardIdSelected: (state, action: PayloadAction<BoardId>) => {
       state.selectedBoardId = action.payload;
       state.galleryView = 'images';
-      state.autoAssignBoardOnClick && (state.autoAddBoardId = action.payload);
     },
     isBatchEnabledChanged: (state, action: PayloadAction<boolean>) => {
       state.isBatchEnabled = action.payload;