Feat: isLazy on OverlayToggle, set media dependency to lazy

Vija02 · Feb 15, 2025 · 18c4700 · 18c4700
1 parent a4a87e5
commit 18c4700
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/apps/homepage/src/pages/o/[slug]/media.tsx b/apps/homepage/src/pages/o/[slug]/media.tsx
@@ -224,6 +224,7 @@ const MediaDependencyPanel = ({
 
   return (
     <OverlayToggle
+      isLazy
       toggler={({ onToggle }) => (
         <Box
           cursor="pointer"

diff --git a/packages/ui/src/OverlayToggle.tsx b/packages/ui/src/OverlayToggle.tsx
@@ -27,6 +27,8 @@ export type OverlayTogglePropTypes = {
   toggler: (_prop: OverlayToggleTogglerFunctionProps) => React.ReactNode;
   /** The Overlay component (Eg: Modal, Drawer) */
   children: React.ReactElement<OverlayToggleComponentProps>;
+  /** If true, rendering of content will defer until the overlay is open */
+  isLazy?: boolean;
 };
 
 /**
@@ -35,6 +37,7 @@ export type OverlayTogglePropTypes = {
  */
 export const OverlayToggle = ({
   toggler,
+  isLazy,
   children,
 }: OverlayTogglePropTypes) => {
   const { isOpen, onToggle, onOpen } = useDisclosure();
@@ -47,12 +50,13 @@ export const OverlayToggle = ({
   return (
     <>
       {toggler({ onOpen, onToggle })}
-      {cloneElement(children, {
-        key,
-        isOpen,
-        onToggle,
-        resetData,
-      })}
+      {(isOpen || !isLazy) &&
+        cloneElement(children, {
+          key,
+          isOpen,
+          onToggle,
+          resetData,
+        })}
     </>
   );
 };