From b4fc45008a19fc58559116ce85c10c0256f672ae Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Thu, 18 Jan 2024 16:42:52 +0000
Subject: [PATCH] Added hasLoaded state in Portal Frame (#19524)

no issue

- added an additional state that keeps track on whether the iFrame
content has loaded, before checking whether Portal has loaded.
---
 .../settings/membership/portal/PortalFrame.tsx     | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx b/apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx
index fb597b3545..2ea7f48a59 100644
--- a/apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx
@@ -11,6 +11,7 @@ const PortalFrame: React.FC<PortalFrameProps> = ({href, onDestroyed, selectedTab
         selectedTab = 'signup';
     }
     const iframeRef = useRef<HTMLIFrameElement>(null);
+    const [hasLoaded, setHasLoaded] = useState<boolean>(false);
     const [isInvisible, setIsInvisible] = useState<boolean>(true);
 
     // Handler for making the iframe visible, memoized with useCallback
@@ -19,31 +20,33 @@ const PortalFrame: React.FC<PortalFrameProps> = ({href, onDestroyed, selectedTab
             if (iframeRef.current) {
                 setIsInvisible(false);
             }
-        }, 200); // Delay to allow scripts to render
+        }, 100); // Delay to allow scripts to render
     }, [iframeRef]); // Dependencies for useCallback
 
     // Effect for attaching message listener
     useEffect(() => {
-        const messageListener = async (event: MessageEvent) => {
+        const messageListener = (event: MessageEvent) => {
             if (!href) {
                 return;
             }
             const originURL = new URL(event.origin);
 
             if (originURL.origin === new URL(href).origin) {
-                if (await event.data === 'portal-ready' || await event.data.type === 'portal-ready') {
+                if (event.data === 'portal-ready' || event.data.type === 'portal-ready') {
                     makeVisible();
                 }
             }
         };
 
-        window.addEventListener('message', messageListener, true);
+        if (hasLoaded) {
+            window.addEventListener('message', messageListener, true);
+        }
 
         return () => {
             window.removeEventListener('message', messageListener, true);
             onDestroyed?.();
         };
-    }, [href, onDestroyed, makeVisible]);
+    }, [href, onDestroyed, makeVisible, hasLoaded]);
 
     if (!href) {
         return null;
@@ -59,6 +62,7 @@ const PortalFrame: React.FC<PortalFrameProps> = ({href, onDestroyed, selectedTab
                 src={href}
                 title="Portal Preview"
                 width="100%"
+                onLoad={() => setHasLoaded(true)}
             />
         </>
     );