Added Portal Frame conditions (#19549)

no issue

- adds 2 addition conditions for when the Portal iframe should be
visible.
- waits an extra 100ms before making it visible to give portal time to
properly load.

---------

Co-authored-by: Princi Vershwal <vershwal.princi@gmail.com>

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

@@ -15,17 +15,14 @@ const PortalFrame: React.FC<PortalFrameProps> = ({href, onDestroyed, selectedTab
     const [hasLoaded, setHasLoaded] = useState<boolean>(false);
     const [isInvisible, setIsInvisible] = useState<boolean>(true);
 
-    // Handler for making the iframe visible, memoized with useCallback
     const makeVisible = useCallback(() => {
         setTimeout(() => {
             if (iframeRef.current) {
-                setHasLoaded(true);
                 setIsInvisible(false);
             }
-        }, 100); // Delay to allow scripts to render
-    }, [iframeRef]); // Dependencies for useCallback
+        }, 200);
+    }, [iframeRef]);
 
-    // Effect for attaching message listener
     useEffect(() => {
         const messageListener = (event: MessageEvent) => {
             if (!href) {
@@ -34,15 +31,13 @@ const PortalFrame: React.FC<PortalFrameProps> = ({href, onDestroyed, selectedTab
             const originURL = new URL(event.origin);
 
             if (originURL.origin === new URL(href).origin) {
-                if (event.data === 'portal-ready' || event.data.type === 'portal-ready') {
+                if (event?.data?.type === 'portal-preview-ready') {
                     makeVisible();
                 }
             }
         };
 
-        if (hasLoaded) {
-            window.addEventListener('message', messageListener, true);
-        }
+        window.addEventListener('message', messageListener, true);
 
         return () => {
             window.removeEventListener('message', messageListener, true);
@@ -55,17 +50,17 @@ const PortalFrame: React.FC<PortalFrameProps> = ({href, onDestroyed, selectedTab
     }
 
     return (
-        <>{!hasLoaded && <div className="mt-[-7%] flex h-screen items-center justify-center"><span><LoadingIndicator /></span></div>}
+        <>{!hasLoaded && isInvisible && <div className="mt-[-7%] flex h-screen items-center justify-center"><span><LoadingIndicator /></span></div>}
             <iframe
                 ref={iframeRef}
-                className={!isInvisible ? '' : 'hidden'}
+                className={!isInvisible && hasLoaded ? '' : 'hidden'}
                 data-testid="portal-preview"
                 height="100%"
                 src={href}
                 title="Portal Preview"
                 width="100%"
                 onLoad={() => {
-                    makeVisible();
+                    setHasLoaded(true);
                 }}
             />
         </>

apps/portal/src/components/PopupModal.js

@@ -131,6 +131,15 @@ class PopupContent extends React.Component {
         );
     }
 
+    sendPortalPreviewReadyEvent() {
+        if (window.self !== window.parent) {
+            window.parent.postMessage({
+                type: 'portal-preview-ready',
+                payload: {}
+            }, '*');
+        }
+    }
+
     render() {
         const {page, pageQuery, site, customSiteUrl} = this.context;
         const products = getSiteProducts({site});
@@ -202,6 +211,7 @@ class PopupContent extends React.Component {
         }
 
         const containerClassName = `${className} ${popupWidthStyle} ${pageClass}`;
+        this.sendPortalPreviewReadyEvent();
         return (
             <>
                 <div className={'gh-portal-popup-wrapper ' + pageClass} onClick={e => this.handlePopupClose(e)}>