Updated background flicker for portal preview

refs https://github.com/TryGhost/members.js/issues/77

- There was a quick flicker before the portal popup appears due to the site theme being visible in background till portal loads
- Adds the constant background with slight delay to show the frame which ensures the portal script is successfully loaded to minimise the visible flicker

app/components/gh-members-lab-setting.hbs

@@ -405,4 +405,4 @@
         @confirm={{action "leavePortalSettings"}}
         @close={{action "closeLeaveSettingsModal"}}
         @modifier="action wide" />
-{{/if}}
+{{/if}}

app/components/modal-members-modal-settings.hbs

@@ -294,10 +294,11 @@
             </div>
 
             <div class="gh-portal-preview-container {{if this.showLinksPage "hide"}}">
+                <div class="gh-portal-site-frame-cover"> </div>
                 <GhSiteIframe
-                    @guid="test-site-portal"
+                    @guid="portal-preview-site"
                     @src={{this.portalPreviewUrl}}
-                    @classNames="gh-portal-siteiframe"
+                    @classNames="gh-portal-siteiframe {{if this.hidePreviewFrame "invisible"}}"
                 ></GhSiteIframe>
             </div>
 

app/components/modal-members-modal-settings.js

@@ -130,6 +130,7 @@ 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'},
@@ -144,6 +145,13 @@ export default ModalComponent.extend({
         }
     },
 
+    didInsertElement() {
+        this._super(...arguments);
+        run.later(this, function () {
+            this.set('hidePreviewFrame', false);
+        }, 1200);
+    },
+
     actions: {
         toggleFreePlan(isChecked) {
             this.updateAllowedPlan('free', isChecked);

app/styles/layouts/portal-settings.css

@@ -267,6 +267,17 @@
     height: calc((1 / 0.95) * 100%) !important;
 }
 
+.gh-portal-site-frame-cover {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: #edf0f2;
+    overflow: hidden;
+    border: none;
+}
+
 .gh-portal-preview-container {
     position: relative;
     flex-grow: 1;