From 2fa47cf27076ba3d34858b548a2145cafdcafc7b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 16 Feb 2025 09:26:13 +1000
Subject: [PATCH] perf(ui): use lazy rendering for builder element settings
 popovers

---
 .../components/sidePanel/builder/ContainerElementSettings.tsx   | 2 +-
 .../components/sidePanel/builder/NodeFieldElementSettings.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementSettings.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementSettings.tsx
index 07ccf57049..34faf31af0 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementSettings.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementSettings.tsx
@@ -32,7 +32,7 @@ export const ContainerElementSettings = memo(({ element }: { element: ContainerE
   }, [dispatch, id]);
 
   return (
-    <Popover>
+    <Popover isLazy lazyBehavior="unmount">
       <PopoverTrigger>
         <IconButton aria-label="settings" icon={<PiWrenchFill />} variant="link" size="sm" alignSelf="stretch" />
       </PopoverTrigger>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementSettings.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementSettings.tsx
index 2f8ec40289..31408faf9e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementSettings.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementSettings.tsx
@@ -61,7 +61,7 @@ export const NodeFieldElementSettings = memo(({ element }: { element: NodeFieldE
   }, [data.settings, fieldTemplate]);
 
   return (
-    <Popover placement="top">
+    <Popover placement="top" isLazy lazyBehavior="unmount">
       <PopoverTrigger>
         <IconButton aria-label="settings" icon={<PiWrenchFill />} variant="link" size="sm" alignSelf="stretch" />
       </PopoverTrigger>