github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-13 18:25:28 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): display cached metadata if it exists instead of always waiting for debounce

Browse Source
This commit is contained in:
psychedelicious
2025-07-04 12:20:10 +10:00
parent 67804313e1
commit 2d06949e80
2 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
View File

@@ -1,5 +1,5 @@
import { ExternalLink, Flex, Tab, TabList, TabPanel, TabPanels, Tabs, Text } from '@invoke-ai/ui-library';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import { IAINoContentFallback, IAINoContentFallbackWithSpinner } from 'common/components/IAIImageFallback';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import ImageMetadataGraphTabContent from 'features/gallery/components/ImageMetadataViewer/ImageMetadataGraphTabContent';
import { useMetadataItem } from 'features/metadata/hooks/useMetadataItem';
@@ -58,13 +58,13 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
<TabPanels>
<TabPanel>
{metadata && !isLoading ? (
{isLoading && <IAINoContentFallbackWithSpinner label="Loading metadata..." />}
{metadata && !isLoading && (
<ScrollableContent>
<ImageMetadataActions metadata={metadata} />
</ScrollableContent>
) : (
<IAINoContentFallback label={t('metadata.noRecallParameters')} />
)}
{!metadata && !isLoading && <IAINoContentFallback label={t('metadata.noRecallParameters')} />}
</TabPanel>
<TabPanel>
{metadata ? (

10
invokeai/frontend/web/src/services/api/hooks/useDebouncedMetadata.ts
View File

@@ -1,14 +1,18 @@
import { skipToken } from '@reduxjs/toolkit/query';
import { useAppSelector } from 'app/store/storeHooks';
import { selectMetadataFetchDebounce } from 'features/system/store/configSlice';
import { useGetImageMetadataQuery } from 'services/api/endpoints/images';
import { imagesApi, useGetImageMetadataQuery } from 'services/api/endpoints/images';
import { useDebounce } from 'use-debounce';
export const useDebouncedMetadata = (imageName?: string | null) => {
const metadataFetchDebounce = useAppSelector(selectMetadataFetchDebounce);
const [debouncedImageName] = useDebounce(imageName, metadataFetchDebounce);
const { data, isFetching } = useGetImageMetadataQuery(debouncedImageName ?? skipToken);
const { currentData: cachedData } = imagesApi.endpoints.getImageMetadata.useQueryState(imageName ?? skipToken);
const { currentData: data, isFetching } = useGetImageMetadataQuery(debouncedImageName ?? skipToken);
return { metadata: data, isLoading: isFetching || imageName !== debouncedImageName };
return {
metadata: cachedData ?? data,
isLoading: cachedData ? false : isFetching || imageName !== debouncedImageName,
};
};