Added loader for preview (#19536)

This commit is contained in:
Princi Vershwal 2024-01-22 20:15:06 +05:30 committed by GitHub
parent 15897096b0
commit 73fb5a3e84
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,4 +1,5 @@
import React, {useCallback, useEffect, useRef, useState} from 'react'; import React, {useCallback, useEffect, useRef, useState} from 'react';
import {LoadingIndicator} from '@tryghost/admin-x-design-system';
type PortalFrameProps = { type PortalFrameProps = {
href: string; href: string;
@ -53,7 +54,7 @@ const PortalFrame: React.FC<PortalFrameProps> = ({href, onDestroyed, selectedTab
} }
return ( return (
<> <>{!hasLoaded && <div className="mt-[-7%] flex h-screen items-center justify-center"><span><LoadingIndicator /></span></div>}
<iframe <iframe
ref={iframeRef} ref={iframeRef}
className={!isInvisible ? '' : 'hidden'} className={!isInvisible ? '' : 'hidden'}
@ -62,7 +63,10 @@ const PortalFrame: React.FC<PortalFrameProps> = ({href, onDestroyed, selectedTab
src={href} src={href}
title="Portal Preview" title="Portal Preview"
width="100%" width="100%"
onLoad={() => setHasLoaded(true)} onLoad={() => {
setHasLoaded(true);
makeVisible();
}}
/> />
</> </>
); );