Fixed portal previews flashing background (#1975)

refs https://github.com/TryGhost/Team/issues/701
requires Portal@1.4.2 or later

- changed `<GhSiteIframe @invisibleUntilLoaded>` to accept a string in place of a `true/false` value
    - if a string is passed then we'll set up a message event listener than listens for a `postMessage` from the iframe with data that matches the supplied string
- updated `<GhSiteIframe>` usage for portal previews to use `@invisibleUntilLoaded="portal-ready"` so they listen for a message event rather than displaying as soon as we get a load event

ghost/admin/app/components/gh-site-iframe.hbs

@@ -3,6 +3,7 @@
     src={{this.srcUrl}}
     frameborder="0"
     allowtransparency="true"
+    {{did-insert this.attachMessageListener}}
     {{did-update this.resetSrcAttribute @guid}}
     {{on "load" this.onLoad}}
     ...attributes

ghost/admin/app/components/gh-site-iframe.js

@@ -11,6 +11,9 @@ export default class GhSiteIframeComponent extends Component {
     @tracked isInvisible = this.args.invisibleUntilLoaded;
 
     willDestroy() {
+        if (this.messageListener) {
+            window.removeEventListener('message', this.messageListener);
+        }
         this.args.onDestroyed?.();
     }
 
@@ -40,12 +43,30 @@ export default class GhSiteIframeComponent extends Component {
 
     @action
     onLoad(event) {
-        if (this.args.invisibleUntilLoaded) {
+        if (this.args.invisibleUntilLoaded && typeof this.args.invisibleUntilLoaded === 'boolean') {
             this.makeVisible.perform();
         }
         this.args.onLoad?.(event);
     }
 
+    @action
+    attachMessageListener() {
+        if (typeof this.args.invisibleUntilLoaded === 'string') {
+            this.messageListener = (event) => {
+                const srcURL = new URL(this.srcUrl);
+                const originURL = new URL(event.origin);
+
+                if (originURL.origin === srcURL.origin) {
+                    if (event.data === this.args.invisibleUntilLoaded) {
+                        this.makeVisible.perform();
+                    }
+                }
+            };
+
+            window.addEventListener('message', this.messageListener, true);
+        }
+    }
+
     @task
     *makeVisible() {
         // give any scripts a bit of time to render before making visible

ghost/admin/app/components/modal-portal-settings.hbs

@@ -248,7 +248,7 @@
                     class="gh-portal-siteiframe"
                     @src={{this.portalPreviewUrl}}
                     @guid={{this.portalPreviewGuid}}
-                    @invisibleUntilLoaded={{true}} />
+                    @invisibleUntilLoaded="portal-ready" />
             </div>
 
         </div>

ghost/admin/app/templates/settings/membership.hbs

@@ -58,7 +58,7 @@
                         <GhSiteIframe
                             @src={{this.portalPreviewUrl}}
                             @guid={{this.portalPreviewGuid}}
-                            @invisibleUntilLoaded={{true}}
+                            @invisibleUntilLoaded="portal-ready"
                             @onLoad={{this.portalPreviewLoaded}}
                             @onDestroyed={{this.portalPreviewDestroyed}} />
                     {{/if}}