From bae7e2e0d3b387b92831a3b4b044d3a54530f948 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 1 Mar 2024 09:57:26 +1100
Subject: [PATCH] fix(ui): fix metadata display issue

---
 .../metadata/hooks/useMetadataItem.tsx        | 22 ++++++++++++-------
 .../web/src/features/metadata/types.ts        |  2 +-
 .../src/features/metadata/util/handlers.ts    |  2 +-
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/metadata/hooks/useMetadataItem.tsx b/invokeai/frontend/web/src/features/metadata/hooks/useMetadataItem.tsx
index 18df0c73235..206d373aa75 100644
--- a/invokeai/frontend/web/src/features/metadata/hooks/useMetadataItem.tsx
+++ b/invokeai/frontend/web/src/features/metadata/hooks/useMetadataItem.tsx
@@ -18,7 +18,7 @@ export const useMetadataItem = <T,>(metadata: unknown, handlers: MetadataHandler
   const [value, setValue] = useState<T | typeof MetadataParsePendingToken | typeof MetadataParseFailedToken>(
     MetadataParsePendingToken
   );
-  const [renderedValue, setRenderedValue] = useState<React.ReactNode>(Pending);
+  const [renderedValueInternal, setRenderedValueInternal] = useState<React.ReactNode>(null);
 
   useEffect(() => {
     const _parse = async () => {
@@ -39,26 +39,32 @@ export const useMetadataItem = <T,>(metadata: unknown, handlers: MetadataHandler
   useEffect(() => {
     const _renderValue = async () => {
       if (value === MetadataParsePendingToken) {
-        setRenderedValue(Pending);
+        setRenderedValueInternal(null);
         return;
       }
       if (value === MetadataParseFailedToken) {
-        setRenderedValue(Failed);
+        setRenderedValueInternal(null);
         return;
       }
 
       const rendered = await handlers.renderValue(value);
 
-      if (typeof rendered === 'string') {
-        setRenderedValue(<Text>{rendered}</Text>);
-        return;
-      }
-      setRenderedValue(rendered);
+      setRenderedValueInternal(rendered);
     };
 
     _renderValue();
   }, [handlers, value]);
 
+  const renderedValue = useMemo(() => {
+    if (value === MetadataParsePendingToken) {
+      return <Pending />;
+    }
+    if (value === MetadataParseFailedToken) {
+      return <Failed />;
+    }
+    return <Text>{renderedValueInternal}</Text>;
+  }, [renderedValueInternal, value]);
+
   const onRecall = useCallback(() => {
     if (!handlers.recall || value === MetadataParsePendingToken || value === MetadataParseFailedToken) {
       return null;
diff --git a/invokeai/frontend/web/src/features/metadata/types.ts b/invokeai/frontend/web/src/features/metadata/types.ts
index 7b102fa1604..0791cdf4491 100644
--- a/invokeai/frontend/web/src/features/metadata/types.ts
+++ b/invokeai/frontend/web/src/features/metadata/types.ts
@@ -4,7 +4,7 @@ import type { O } from 'ts-toolbelt';
 /**
  * Renders a value of type T as a React node.
  */
-export type MetadataRenderValueFunc<T> = (value: T) => Promise<React.ReactNode>;
+export type MetadataRenderValueFunc<T> = (value: T) => Promise<string>;
 
 /**
  * Gets the label of the current metadata item as a string.
diff --git a/invokeai/frontend/web/src/features/metadata/util/handlers.ts b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
index a877648956a..09d65b7d922 100644
--- a/invokeai/frontend/web/src/features/metadata/util/handlers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
@@ -150,7 +150,7 @@ const buildRecallItem =
     }
   };
 
-const resolveToString = (value: unknown) => new Promise<React.ReactNode>((resolve) => resolve(String(value)));
+const resolveToString = (value: unknown) => new Promise<string>((resolve) => resolve(String(value)));
 
 const buildHandlers: BuildMetadataHandlers = ({
   getLabel,