diff --git a/packages/app/src/embed/components/Content/index.tsx b/packages/app/src/embed/components/Content/index.tsx index 088b213c71d..82dce607d7c 100644 --- a/packages/app/src/embed/components/Content/index.tsx +++ b/packages/app/src/embed/components/Content/index.tsx @@ -454,6 +454,7 @@ export default class Content extends React.PureComponent { onToggleProjectView={this.onToggleProjectView} onResize={this.handleResize} dragging={this.state.dragging} + showScreenshotOverlay /> ), actions: [], diff --git a/packages/common/src/components/Preview/index.tsx b/packages/common/src/components/Preview/index.tsx index 36587a8687d..5b8a8e15db4 100644 --- a/packages/common/src/components/Preview/index.tsx +++ b/packages/common/src/components/Preview/index.tsx @@ -49,6 +49,11 @@ export type Props = { delay?: number; className?: string; overlayMessage?: string; + /** + * Whether to show a screenshot in the preview as a "placeholder" while loading + * to reduce perceived loading time + */ + showScreenshotOverlay?: boolean; }; type State = { @@ -90,7 +95,7 @@ class BasePreview extends React.Component { url: initialUrl, forward: false, back: false, - showScreenshot: true, + showScreenshot: props.showScreenshotOverlay, useFallbackDomain: false, }; @@ -104,7 +109,14 @@ class BasePreview extends React.Component { // Remove screenshot after specific time, so the loading container spinner can still show this.setState({ showScreenshot: false }); }, 100); + } else { + setTimeout(() => { + if (this.state.showScreenshot) { + this.setState({ showScreenshot: false }); + } + }, 800); } + this.listener = listen(this.handleMessage); if (props.delay) { @@ -114,12 +126,6 @@ class BasePreview extends React.Component { (window as any).openNewWindow = this.openNewWindow; this.testFallbackDomainIfNeeded(); - - setTimeout(() => { - if (this.state.showScreenshot) { - this.setState({ showScreenshot: false }); - } - }, 800); } UNSAFE_componentWillUpdate(nextProps: Props, nextState: State) { @@ -556,7 +562,7 @@ class BasePreview extends React.Component { {overlayMessage && {overlayMessage}} { height: '100%', filter: `blur(2px)`, transform: 'scale(1.025, 1.025)', - backgroundImage: `url("${ - this.props.sandbox.screenshotUrl - }")`, + backgroundImage: `url("${this.props.sandbox.screenshotUrl}")`, backgroundRepeat: 'no-repeat', backgroundPositionX: 'center', }}