diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySelectionCountTag.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySelectionCountTag.tsx
index 6fd6283a8e..fe03149df7 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySelectionCountTag.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySelectionCountTag.tsx
@@ -4,23 +4,16 @@ import { useIsRegionFocused } from 'common/hooks/interactionScopes';
import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages';
import { selectionChanged } from 'features/gallery/store/gallerySlice';
import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
+import type { ImageDTO } from 'services/api/types';
-export const GallerySelectionCountTag = () => {
+export const GallerySelectionCountTag = memo(() => {
const dispatch = useAppDispatch();
const { selection } = useAppSelector((s) => s.gallery);
- const { t } = useTranslation();
const { imageDTOs } = useGalleryImages();
const isGalleryFocused = useIsRegionFocused('gallery');
- const onClearSelection = useCallback(() => {
- const firstImage = selection[0];
- if (firstImage) {
- dispatch(selectionChanged([firstImage]));
- }
- }, [dispatch, selection]);
-
const onSelectPage = useCallback(() => {
dispatch(selectionChanged([...selection, ...imageDTOs]));
}, [dispatch, selection, imageDTOs]);
@@ -33,6 +26,28 @@ export const GallerySelectionCountTag = () => {
dependencies: [onSelectPage, isGalleryFocused],
});
+ if (selection.length <= 1) {
+ return null;
+ }
+
+ return ;
+});
+
+GallerySelectionCountTag.displayName = 'GallerySelectionCountTag';
+
+const GallerySelectionCountTagContent = memo(({ selection }: { selection: ImageDTO[] }) => {
+ const { t } = useTranslation();
+ const dispatch = useAppDispatch();
+
+ const isGalleryFocused = useIsRegionFocused('gallery');
+
+ const onClearSelection = useCallback(() => {
+ const firstImage = selection[0];
+ if (firstImage) {
+ dispatch(selectionChanged([firstImage]));
+ }
+ }, [dispatch, selection]);
+
useRegisteredHotkeys({
id: 'clearSelection',
category: 'gallery',
@@ -41,10 +56,6 @@ export const GallerySelectionCountTag = () => {
dependencies: [onClearSelection, selection, isGalleryFocused],
});
- if (selection.length <= 1) {
- return null;
- }
-
return (
{
);
-};
+});
+
+GallerySelectionCountTagContent.displayName = 'GallerySelectionCountTagContent';