From 602549097ad2e90b2377d6599307dc76239430d7 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 18 May 2021 16:36:18 +0100
Subject: [PATCH] Fixed flash of site when portal preview is loading

no issue

- added `@invisibleUntilLoaded` boolean argument to `<GhSiteIframe>`
  - when set to true add `.invisible` class until iframe's `load` event is triggered
- removed manual iframe hiding with 1.2sec delay from portal settings modal
- added `@onLoad` argument to `<GhSiteIframe>` for consumers to hook in if needed
---
 ghost/admin/app/components/gh-site-iframe.hbs        |  3 ++-
 ghost/admin/app/components/gh-site-iframe.js         | 11 +++++++++++
 ghost/admin/app/components/modal-portal-settings.hbs |  3 ++-
 ghost/admin/app/components/modal-portal-settings.js  |  6 ------
 ghost/admin/app/templates/settings/membership.hbs    |  4 +++-
 5 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/ghost/admin/app/components/gh-site-iframe.hbs b/ghost/admin/app/components/gh-site-iframe.hbs
index db1910017f..c845266a41 100644
--- a/ghost/admin/app/components/gh-site-iframe.hbs
+++ b/ghost/admin/app/components/gh-site-iframe.hbs
@@ -1,8 +1,9 @@
 <iframe
-    class="site-frame"
+    class="site-frame {{if this.isInvisible "invisible"}}"
     src={{this.srcUrl}}
     frameborder="0"
     allowtransparency="true"
     {{did-update this.resetSrcAttribute @guid}}
+    {{on "load" this.onLoad}}
     ...attributes
 ></iframe>
\ No newline at end of file
diff --git a/ghost/admin/app/components/gh-site-iframe.js b/ghost/admin/app/components/gh-site-iframe.js
index 97adf18870..8a3a6e53f3 100644
--- a/ghost/admin/app/components/gh-site-iframe.js
+++ b/ghost/admin/app/components/gh-site-iframe.js
@@ -1,10 +1,13 @@
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
+import {tracked} from '@glimmer/tracking';
 
 export default class GhSiteIframeComponent extends Component {
     @service config;
 
+    @tracked isInvisible = this.args.invisibleUntilLoaded;
+
     get srcUrl() {
         return this.args.src || `${this.config.get('blogUrl')}/`;
     }
@@ -20,4 +23,12 @@ export default class GhSiteIframeComponent extends Component {
         }
         this._lastGuid = this.args.guid;
     }
+
+    @action
+    onLoad(event) {
+        if (this.args.invisibleUntilLoaded) {
+            this.isInvisible = false;
+        }
+        this.args.onLoad?.(event);
+    }
 }
diff --git a/ghost/admin/app/components/modal-portal-settings.hbs b/ghost/admin/app/components/modal-portal-settings.hbs
index e9fb9695f7..232c947c72 100644
--- a/ghost/admin/app/components/modal-portal-settings.hbs
+++ b/ghost/admin/app/components/modal-portal-settings.hbs
@@ -242,8 +242,9 @@
             <div class="gh-portal-preview-container {{if this.showLinksPage "hide"}}">
                 <div class="gh-portal-site-frame-cover"> </div>
                 <GhSiteIframe
+                    class="gh-portal-siteiframe"
                     @src={{this.portalPreviewUrl}}
-                    class="gh-portal-siteiframe {{if this.hidePreviewFrame "invisible"}}" />
+                    @invisibleUntilLoaded={{true}} />
             </div>
 
         </div>
diff --git a/ghost/admin/app/components/modal-portal-settings.js b/ghost/admin/app/components/modal-portal-settings.js
index 35af1eea8c..ee7c19c858 100644
--- a/ghost/admin/app/components/modal-portal-settings.js
+++ b/ghost/admin/app/components/modal-portal-settings.js
@@ -88,7 +88,6 @@ export default ModalComponent.extend({
 
     init() {
         this._super(...arguments);
-        this.set('hidePreviewFrame', true);
         this.buttonStyleOptions = [
             {name: 'icon-and-text', label: 'Icon and text'},
             {name: 'icon-only', label: 'Icon only'},
@@ -108,11 +107,6 @@ export default ModalComponent.extend({
     didInsertElement() {
         this._super(...arguments);
         this.settings.get('errors').clear();
-        run.later(this, function () {
-            if (!this.isDestroyed && !this.isDestroying) {
-                this.set('hidePreviewFrame', false);
-            }
-        }, 1200);
     },
 
     actions: {
diff --git a/ghost/admin/app/templates/settings/membership.hbs b/ghost/admin/app/templates/settings/membership.hbs
index 3e550cda1e..19912a20b0 100644
--- a/ghost/admin/app/templates/settings/membership.hbs
+++ b/ghost/admin/app/templates/settings/membership.hbs
@@ -51,7 +51,9 @@
                     {{#if (eq this.settings.membersSignupAccess 'none')}}
                         PORTAL DISABLED
                     {{else}}
-                        <GhSiteIframe @src={{this.portalPreviewUrl}} />
+                        <GhSiteIframe
+                            @src={{this.portalPreviewUrl}}
+                            @invisibleUntilLoaded={{true}} />
                     {{/if}}
                 </div>
             </div>