diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx index 8f348b5c415..aa6d8b105a3 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx @@ -23,7 +23,7 @@ import type { MouseEvent, MouseEventHandler, MutableRefObject } from 'react'; import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { PiArchiveBold, PiImageSquare } from 'react-icons/pi'; -import { useUpdateBoardMutation } from 'services/api/endpoints/boards'; +import { useGetBoardImagesTotalQuery, useUpdateBoardMutation } from 'services/api/endpoints/boards'; import { useGetImageDTOQuery } from 'services/api/endpoints/images'; import type { BoardDTO } from 'services/api/types'; @@ -56,6 +56,12 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps const [localBoardName, setLocalBoardName] = useState(board.board_name); const onStartEditingRef = useRef(undefined); + const { imagesTotal } = useGetBoardImagesTotalQuery(board.board_id, { + selectFromResult: ({ data }) => { + return { imagesTotal: data?.total ?? 0 }; + }, + }); + const onClick = useCallback(() => { if (selectedBoardId !== board.board_id) { dispatch(boardIdSelected({ boardId: board.board_id })); @@ -166,7 +172,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps {autoAddBoardId === board.board_id && !editingDisclosure.isOpen && } {board.archived && !editingDisclosure.isOpen && } - {!editingDisclosure.isOpen && {board.image_count}} + {!editingDisclosure.isOpen && {imagesTotal}} {t('unifiedCanvas.move')}} />