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

@@ -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>

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);
+    }
 }

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>

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: {

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>