OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added hasLoaded state in Portal Frame (#19524)

Browse Source 
no issue

- added an additional state that keeps track on whether the iFrame
content has loaded, before checking whether Portal has loaded.
This commit is contained in:
Ronald Langeveld 2024-01-18 16:42:52 +00:00 committed by GitHub
parent b216aa0628
commit b4fc45008a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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)}
/>
</>
);