github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): star button not working on Chrome

Browse Source 
Not sure why the perf optimisation doesn't work on Chrome but I reverted it.
This commit is contained in:
psychedelicious
2025-02-24 06:53:25 +10:00
parent 157904522f
commit 13e129bef2
2 changed files with 8 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
View File

@@ -18,7 +18,6 @@ import { getGalleryImageDataTestId } from 'features/gallery/components/ImageGrid
import { SizedSkeletonLoader } from 'features/gallery/components/ImageGrid/SizedSkeletonLoader';
import { $imageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
import { imageToCompareChanged, selectGallerySlice } from 'features/gallery/store/gallerySlice';
import { atom } from 'nanostores';
import type { MouseEventHandler } from 'react';
import { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';
import type { ImageDTO } from 'services/api/types';
@@ -178,20 +177,15 @@ export const GalleryImage = memo(({ imageDTO }: Props) => {
);
}, [imageDTO, element, store, dndId]);
// Perf optimization:
// The gallery image component can be heavy and re-render often. We want to track hovering state without causing
// unnecessary re-renders. To do this, we use a local atom - which has a stable reference - in the image component -
// and then pass the atom to the hover icons component, which subscribes to the atom and re-renders when the atom
// changes.
const $isHovered = useMemo(() => atom(false), []);
const [isHovered, setIsHovered] = useState(false);
const onMouseOver = useCallback(() => {
$isHovered.set(true);
}, [$isHovered]);
setIsHovered(true);
}, []);
const onMouseOut = useCallback(() => {
$isHovered.set(false);
}, [$isHovered]);
setIsHovered(false);
}, []);
const onClick = useCallback<MouseEventHandler<HTMLDivElement>>(
(e) => {
@@ -247,7 +241,7 @@ export const GalleryImage = memo(({ imageDTO }: Props) => {
maxH="full"
borderRadius="base"
/>
<GalleryImageHoverIcons imageDTO={imageDTO} $isHovered={$isHovered} />
<GalleryImageHoverIcons imageDTO={imageDTO} isHovered={isHovered} />
</Flex>
</Box>
{dragPreviewState?.type === 'multiple-image' ? createMultipleImageDragPreview(dragPreviewState) : null}

7
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageHoverIcons.tsx
View File

@@ -1,22 +1,19 @@
import { useStore } from '@nanostores/react';
import { useAppSelector } from 'app/store/storeHooks';
import { GalleryImageDeleteIconButton } from 'features/gallery/components/ImageGrid/GalleryImageDeleteIconButton';
import { GalleryImageOpenInViewerIconButton } from 'features/gallery/components/ImageGrid/GalleryImageOpenInViewerIconButton';
import { GalleryImageSizeBadge } from 'features/gallery/components/ImageGrid/GalleryImageSizeBadge';
import { GalleryImageStarIconButton } from 'features/gallery/components/ImageGrid/GalleryImageStarIconButton';
import { selectAlwaysShouldImageSizeBadge } from 'features/gallery/store/gallerySelectors';
import type { Atom } from 'nanostores';
import { memo } from 'react';
import type { ImageDTO } from 'services/api/types';
type Props = {
imageDTO: ImageDTO;
$isHovered: Atom<boolean>;
isHovered: boolean;
};
export const GalleryImageHoverIcons = memo(({ imageDTO, $isHovered }: Props) => {
export const GalleryImageHoverIcons = memo(({ imageDTO, isHovered }: Props) => {
const alwaysShowImageSizeBadge = useAppSelector(selectAlwaysShouldImageSizeBadge);
const isHovered = useStore($isHovered);
return (
<>