From b9f83eae6aa6135a712b59cba24ee68bd00255bd Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 11 Oct 2024 19:58:31 +1000
Subject: [PATCH] perf(ui): do not call upload hook unless upload is needed

---
 .../web/src/common/components/IAIDndImage.tsx | 95 ++++++++++++-------
 1 file changed, 59 insertions(+), 36 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
index 11fb2ae34f..e5306c14e3 100644
--- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
@@ -132,36 +132,6 @@ const IAIDndImage = (props: IAIDndImageProps) => {
     [onMouseOut]
   );
 
-  const { getUploadButtonProps, getUploadInputProps } = useImageUploadButton({
-    postUploadAction,
-    isDisabled: isUploadDisabled,
-  });
-
-  const uploadButtonStyles = useMemo<SystemStyleObject>(() => {
-    const styles: SystemStyleObject = {
-      minH: minSize,
-      w: 'full',
-      h: 'full',
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius: 'base',
-      transitionProperty: 'common',
-      transitionDuration: '0.1s',
-      color: 'base.500',
-    };
-    if (!isUploadDisabled) {
-      Object.assign(styles, {
-        cursor: 'pointer',
-        bg: 'base.700',
-        _hover: {
-          bg: 'base.650',
-          color: 'base.300',
-        },
-      });
-    }
-    return styles;
-  }, [isUploadDisabled, minSize]);
-
   const openInNewTab = useCallback(
     (e: MouseEvent) => {
       if (!imageDTO) {
@@ -224,12 +194,12 @@ const IAIDndImage = (props: IAIDndImageProps) => {
         </Flex>
       )}
       {!imageDTO && !isUploadDisabled && (
-        <>
-          <Flex sx={uploadButtonStyles} {...getUploadButtonProps()}>
-            <input {...getUploadInputProps()} />
-            {uploadElement}
-          </Flex>
-        </>
+        <UploadButton
+          isUploadDisabled={isUploadDisabled}
+          postUploadAction={postUploadAction}
+          uploadElement={uploadElement}
+          minSize={minSize}
+        />
       )}
       {!imageDTO && isUploadDisabled && noContentFallback}
       {imageDTO && !isDragDisabled && (
@@ -247,3 +217,56 @@ const IAIDndImage = (props: IAIDndImageProps) => {
 };
 
 export default memo(IAIDndImage);
+
+const UploadButton = memo(
+  ({
+    isUploadDisabled,
+    postUploadAction,
+    uploadElement,
+    minSize,
+  }: {
+    isUploadDisabled: boolean;
+    postUploadAction?: PostUploadAction;
+    uploadElement: ReactNode;
+    minSize: number;
+  }) => {
+    const { getUploadButtonProps, getUploadInputProps } = useImageUploadButton({
+      postUploadAction,
+      isDisabled: isUploadDisabled,
+    });
+
+    const uploadButtonStyles = useMemo<SystemStyleObject>(() => {
+      const styles: SystemStyleObject = {
+        minH: minSize,
+        w: 'full',
+        h: 'full',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 'base',
+        transitionProperty: 'common',
+        transitionDuration: '0.1s',
+        color: 'base.500',
+      };
+      if (!isUploadDisabled) {
+        Object.assign(styles, {
+          cursor: 'pointer',
+          bg: 'base.700',
+          _hover: {
+            bg: 'base.650',
+            color: 'base.300',
+          },
+        });
+      }
+      return styles;
+    }, [isUploadDisabled, minSize]);
+
+    return (
+      <Flex sx={uploadButtonStyles} {...getUploadButtonProps()}>
+        <input {...getUploadInputProps()} />
+        {uploadElement}
+      </Flex>
+    );
+  }
+);
+
+UploadButton.displayName = 'UploadButton';