From 2826ebfac455de3854c96c3a6faf1aa3922aa179 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Mon, 24 May 2021 11:02:26 +0100 Subject: [PATCH] Added timeout to help prevent site background flashes in portal previews refs https://github.com/TryGhost/Team/issues/701 - `onload` event fires once the page has loaded but scripts may still be processing that would render an overlay. Wait for 100ms for renders to occur before making the iframe contents visible to allow for renders to occur --- ghost/admin/app/components/gh-site-iframe.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/ghost/admin/app/components/gh-site-iframe.js b/ghost/admin/app/components/gh-site-iframe.js index d92ff418f5..7f3a7e384a 100644 --- a/ghost/admin/app/components/gh-site-iframe.js +++ b/ghost/admin/app/components/gh-site-iframe.js @@ -1,6 +1,8 @@ import Component from '@glimmer/component'; import {action} from '@ember/object'; import {inject as service} from '@ember/service'; +import {task} from 'ember-concurrency-decorators'; +import {timeout} from 'ember-concurrency'; import {tracked} from '@glimmer/tracking'; export default class GhSiteIframeComponent extends Component { @@ -39,8 +41,16 @@ export default class GhSiteIframeComponent extends Component { @action onLoad(event) { if (this.args.invisibleUntilLoaded) { - this.isInvisible = false; + this.makeVisible.perform(); } this.args.onLoad?.(event); } + + @task + *makeVisible() { + // give any scripts a bit of time to render before making visible + // allows portal to render it's overlay and prevent site background flashes + yield timeout(100); + this.isInvisible = false; + } }