From 73fb5a3e84ef96dc7e6c24bb550b28069087107b Mon Sep 17 00:00:00 2001
From: Princi Vershwal <vershwal.princi@gmail.com>
Date: Mon, 22 Jan 2024 20:15:06 +0530
Subject: [PATCH] Added loader for preview (#19536)

---
 .../components/settings/membership/portal/PortalFrame.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 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 2ea7f48a59..64a180a95d 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
@@ -1,4 +1,5 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {LoadingIndicator} from '@tryghost/admin-x-design-system';
 
 type PortalFrameProps = {
     href: string;
@@ -53,7 +54,7 @@ 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>}
             <iframe
                 ref={iframeRef}
                 className={!isInvisible ? '' : 'hidden'}
@@ -62,7 +63,10 @@ const PortalFrame: React.FC<PortalFrameProps> = ({href, onDestroyed, selectedTab
                 src={href}
                 title="Portal Preview"
                 width="100%"
-                onLoad={() => setHasLoaded(true)}
+                onLoad={() => {
+                    setHasLoaded(true);
+                    makeVisible();
+                }}
             />
         </>
     );