From 2d06949e80b8c14c075def1cef833e731af6284b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 4 Jul 2025 12:20:10 +1000
Subject: [PATCH] feat(ui): display cached metadata if it exists instead of
 always waiting for debounce

---
 .../ImageMetadataViewer/ImageMetadataViewer.tsx        |  8 ++++----
 .../web/src/services/api/hooks/useDebouncedMetadata.ts | 10 +++++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
index 80ddca5d93..92acffef32 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
@@ -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 ? (
diff --git a/invokeai/frontend/web/src/services/api/hooks/useDebouncedMetadata.ts b/invokeai/frontend/web/src/services/api/hooks/useDebouncedMetadata.ts
index 50403ff869..3b54f965b4 100644
--- a/invokeai/frontend/web/src/services/api/hooks/useDebouncedMetadata.ts
+++ b/invokeai/frontend/web/src/services/api/hooks/useDebouncedMetadata.ts
@@ -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,
+  };
 };