Added performance adjustments to Portal iFrames (#19373)

refs PROD-4

apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx

@@ -1,37 +1,51 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 
 type PortalFrameProps = {
-    selectedTab?: string;
     href: string;
+    onLoaded?: (iframe: HTMLIFrameElement) => void;
+    onDestroyed?: () => void;
+    selectedTab?: string;
 }
 
-// we should refactor this to be reused in offers as well
-const PortalFrame: React.FC<PortalFrameProps> = ({selectedTab, href}) => {
+const PortalFrame: React.FC<PortalFrameProps> = ({href, onLoaded, onDestroyed, selectedTab}) => {
     if (!selectedTab) {
         selectedTab = 'signup';
     }
-
     const iframeRef = useRef<HTMLIFrameElement>(null);
-    const [portalReady, setPortalReady] = useState(false);
+    const [isInvisible, setIsInvisible] = useState<boolean>(true);
 
+    // Handler for making the iframe visible, memoized with useCallback
+    const makeVisible = useCallback(() => {
+        setTimeout(() => {
+            setIsInvisible(false);
+            if (onLoaded && iframeRef.current) {
+                onLoaded(iframeRef.current);
+            }
+        }, 100); // Delay to allow scripts to render
+    }, [onLoaded]); // Dependencies for useCallback
+
+    // Effect for attaching message listener
     useEffect(() => {
-        const messageListener = (event: MessageEvent<'portal-ready' | {type: string}>) => {
+        const messageListener = (event: MessageEvent) => {
             if (!href) {
                 return;
             }
-            const srcURL = new URL(href);
             const originURL = new URL(event.origin);
 
-            if (originURL.origin === srcURL.origin) {
+            if (originURL.origin === new URL(href).origin) {
                 if (event.data === 'portal-ready' || event.data.type === 'portal-ready') {
-                    setPortalReady(true);
+                    makeVisible();
                 }
             }
         };
 
         window.addEventListener('message', messageListener, true);
-        return () => window.removeEventListener('message', messageListener, true);
-    }, [href]);
+
+        return () => {
+            window.removeEventListener('message', messageListener, true);
+            onDestroyed?.();
+        };
+    }, [href, onDestroyed, makeVisible]);
 
     if (!href) {
         return null;
@@ -41,13 +55,14 @@ const PortalFrame: React.FC<PortalFrameProps> = ({selectedTab, href}) => {
         <>
             <iframe
                 ref={iframeRef}
-                className={!portalReady ? 'hidden' : ''}
+                className={!isInvisible ? '' : 'hidden'}
                 data-testid="portal-preview"
                 height="100%"
                 src={href}
                 title="Portal Preview"
                 width="100%"
-            ></iframe>
+                onLoad={makeVisible}
+            />
         </>
     );
 };