From 190ef6732c74ab658fc422ebf58727d1e46c6d0b Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 11 Oct 2024 20:48:56 +1000 Subject: [PATCH] perf(ui): properly memoize gallery image icon components --- .../components/ImageGrid/GalleryImage.tsx | 145 ++++++++++-------- 1 file changed, 81 insertions(+), 64 deletions(-) diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx index 8a4ca0e35d..8f361313af 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx @@ -67,8 +67,6 @@ const GalleryImageContent = memo(({ index, imageDTO }: HoverableImageProps) => { const isSelectedForCompare = useAppSelector(selectIsSelectedForCompare); const { handleClick, isSelected, areMultiplesSelected } = useMultiselect(imageDTO); - const customStarUi = useStore($customStarUI); - const imageContainerRef = useScrollIntoView(isSelected, index, areMultiplesSelected); const draggableData = useMemo(() => { @@ -91,20 +89,6 @@ const GalleryImageContent = memo(({ index, imageDTO }: HoverableImageProps) => { } }, [imageDTO, selectedBoardId, areMultiplesSelected]); - const [starImages] = useStarImagesMutation(); - const [unstarImages] = useUnstarImagesMutation(); - - const toggleStarredState = useCallback(() => { - if (imageDTO) { - if (imageDTO.starred) { - unstarImages({ imageDTOs: [imageDTO] }); - } - if (!imageDTO.starred) { - starImages({ imageDTOs: [imageDTO] }); - } - } - }, [starImages, unstarImages, imageDTO]); - const [isHovered, setIsHovered] = useState(false); const handleMouseOver = useCallback(() => { @@ -121,25 +105,6 @@ const GalleryImageContent = memo(({ index, imageDTO }: HoverableImageProps) => { setIsHovered(false); }, []); - const starIcon = useMemo(() => { - if (imageDTO.starred) { - return customStarUi ? customStarUi.on.icon : ; - } - if (!imageDTO.starred && isHovered) { - return customStarUi ? customStarUi.off.icon : ; - } - }, [imageDTO.starred, isHovered, customStarUi]); - - const starTooltip = useMemo(() => { - if (imageDTO.starred) { - return customStarUi ? customStarUi.off.text : 'Unstar'; - } - if (!imageDTO.starred) { - return customStarUi ? customStarUi.on.text : 'Star'; - } - return ''; - }, [imageDTO.starred, customStarUi]); - const dataTestId = useMemo(() => getGalleryImageDataTestId(imageDTO.image_name), [imageDTO.image_name]); if (!imageDTO) { @@ -173,31 +138,8 @@ const GalleryImageContent = memo(({ index, imageDTO }: HoverableImageProps) => { onMouseOut={handleMouseOut} > <> - {(isHovered || alwaysShowImageSizeBadge) && ( - {`${imageDTO.width}x${imageDTO.height}`} - )} - + {(isHovered || alwaysShowImageSizeBadge) && } + {(isHovered || imageDTO.starred) && } {isHovered && } {isHovered && } @@ -209,7 +151,7 @@ const GalleryImageContent = memo(({ index, imageDTO }: HoverableImageProps) => { GalleryImageContent.displayName = 'GalleryImageContent'; -const DeleteIcon = ({ imageDTO }: { imageDTO: ImageDTO }) => { +const DeleteIcon = memo(({ imageDTO }: { imageDTO: ImageDTO }) => { const shift = useShiftModifier(); const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -238,9 +180,11 @@ const DeleteIcon = ({ imageDTO }: { imageDTO: ImageDTO }) => { insetInlineEnd={2} /> ); -}; +}); -const OpenInViewerIconButton = ({ imageDTO }: { imageDTO: ImageDTO }) => { +DeleteIcon.displayName = 'DeleteIcon'; + +const OpenInViewerIconButton = memo(({ imageDTO }: { imageDTO: ImageDTO }) => { const imageViewer = useImageViewer(); const { t } = useTranslation(); @@ -258,4 +202,77 @@ const OpenInViewerIconButton = ({ imageDTO }: { imageDTO: ImageDTO }) => { insetInlineStart={2} /> ); -}; +}); + +OpenInViewerIconButton.displayName = 'OpenInViewerIconButton'; + +const StarIcon = memo(({ imageDTO }: { imageDTO: ImageDTO }) => { + const customStarUi = useStore($customStarUI); + const [starImages] = useStarImagesMutation(); + const [unstarImages] = useUnstarImagesMutation(); + + const toggleStarredState = useCallback(() => { + if (imageDTO) { + if (imageDTO.starred) { + unstarImages({ imageDTOs: [imageDTO] }); + } + if (!imageDTO.starred) { + starImages({ imageDTOs: [imageDTO] }); + } + } + }, [starImages, unstarImages, imageDTO]); + + const starIcon = useMemo(() => { + if (imageDTO.starred) { + return customStarUi ? customStarUi.on.icon : ; + } + if (!imageDTO.starred) { + return customStarUi ? customStarUi.off.icon : ; + } + }, [imageDTO.starred, customStarUi]); + + const starTooltip = useMemo(() => { + if (imageDTO.starred) { + return customStarUi ? customStarUi.off.text : 'Unstar'; + } + if (!imageDTO.starred) { + return customStarUi ? customStarUi.on.text : 'Star'; + } + return ''; + }, [imageDTO.starred, customStarUi]); + + return ( + + ); +}); + +StarIcon.displayName = 'StarIcon'; + +const SizeBadge = memo(({ imageDTO }: { imageDTO: ImageDTO }) => { + return ( + {`${imageDTO.width}x${imageDTO.height}`} + ); +}); + +SizeBadge.displayName = 'SizeBadge';