🐛 Fixed Portal icon misaligned in Preview (#19723)

no issue

- because we use hidden here, it prevents the Portal iFrame from
calculating the width and position correctly on the initial load.
- Changing it to `invisible` conditionally allows it to do the calculation correctly.
- Also had to reposition the loading indicator.

apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx

@@ -611,6 +611,7 @@ const AddOfferModal = () => {
 
     const iframe = <PortalFrame
         href={href || ''}
+        portalParent='offers'
     />;
     return <PreviewModalContent
         afterClose={() => {

apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx

@@ -249,6 +249,7 @@ const EditOfferModal: React.FC<{id: string}> = ({id}) => {
 
     const iframe = <PortalFrame
         href={href || ''}
+        portalParent='offers'
     />;
 
     return offerById ? <PreviewModalContent

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

@@ -5,9 +5,10 @@ type PortalFrameProps = {
     href: string;
     onDestroyed?: () => void;
     selectedTab?: string;
+    portalParent?: string;
 }
 
-const PortalFrame: React.FC<PortalFrameProps> = ({href, onDestroyed, selectedTab}) => {
+const PortalFrame: React.FC<PortalFrameProps> = ({href, onDestroyed, selectedTab, portalParent}) => {
     if (!selectedTab) {
         selectedTab = 'signup';
     }
@@ -49,11 +50,19 @@ const PortalFrame: React.FC<PortalFrameProps> = ({href, onDestroyed, selectedTab
         return null;
     }
 
+    let loaderClassNames = 'mt-[-7%] flex h-screen items-center justify-center';
+    let loaderVisibility = 'hidden';
+
+    if (portalParent === 'preview') {
+        loaderClassNames = 'absolute z-50 mt-[-7%] flex h-screen items-center justify-center';
+        loaderVisibility = 'invisible';
+    }
+
     return (
-        <>{isInvisible && <div className="mt-[-7%] flex h-screen items-center justify-center"><span><LoadingIndicator /></span></div>}
+        <>{isInvisible && <div className={loaderClassNames}><span><LoadingIndicator /></span></div>}
             <iframe
                 ref={iframeRef}
-                className={!isInvisible && hasLoaded ? '' : 'hidden'}
+                className={!isInvisible && hasLoaded ? '' : loaderVisibility}
                 data-testid="portal-preview"
                 height="100%"
                 src={href}

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

@@ -36,7 +36,7 @@ const PortalPreview: React.FC<PortalPreviewProps> = ({
     case 'account':
         tabContents = (
             <>
-                <PortalFrame href={href || ''} selectedTab={selectedTab} />
+                <PortalFrame href={href || ''} portalParent='preview' selectedTab={selectedTab} />
             </>
         );
         break;
@@ -46,7 +46,7 @@ const PortalPreview: React.FC<PortalPreviewProps> = ({
     default:
         tabContents = (
             <>
-                <PortalFrame href={href || ''} selectedTab={selectedTab} />
+                <PortalFrame href={href || ''} portalParent='preview' selectedTab={selectedTab} />
             </>
         );
         break;