Fix/refresh iframe (#6787)

Fix/refresh iframe

lib/channel-postmessage/src/index.ts

@@ -29,12 +29,14 @@ export class PostmsgTransport {
 
   private handler: ChannelHandler;
 
+  private connected: boolean;
+
   // eslint-disable-next-line @typescript-eslint/no-parameter-properties
   constructor(private readonly config: Config) {
     this.buffer = [];
     this.handler = null;
     window.addEventListener('message', this.handleEvent.bind(this), false);
-    document.addEventListener('DOMContentLoaded', () => this.flush());
+
     // Check whether the config.page parameter has a valid value
     if (config.page !== 'manager' && config.page !== 'preview') {
       throw new Error(`postmsg-channel: "config.page" cannot be "${config.page}"`);
@@ -42,7 +44,14 @@ export class PostmsgTransport {
   }
 
   setHandler(handler: ChannelHandler): void {
-    this.handler = handler;
+    this.handler = (...args) => {
+      handler.apply(this, args);
+
+      if (!this.connected && this.getWindow()) {
+        this.flush();
+        this.connected = true;
+      }
+    };
   }
 
   /**

lib/ui/src/components/preview/iframe.js

@@ -2,7 +2,6 @@ import window from 'global';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-// this component renders an iframe, which gets updates via post-messages
 export class IFrame extends Component {
   iframe = null;
 
@@ -12,20 +11,20 @@ export class IFrame extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    const { scale, src } = this.props;
-    return scale !== nextProps.scale || src !== nextProps.src;
-  }
-
-  componentDidUpdate(prevProps) {
     const { scale } = this.props;
-    if (scale !== prevProps.scale) {
+
+    if (scale !== nextProps.scale) {
       this.setIframeBodyStyle({
-        width: `${scale * 100}%`,
-        height: `${scale * 100}%`,
-        transform: `scale(${1 / scale})`,
+        width: `${nextProps.scale * 100}%`,
+        height: `${nextProps.scale * 100}%`,
+        transform: `scale(${1 / nextProps.scale})`,
         transformOrigin: 'top left',
       });
     }
+
+    // this component renders an iframe, which gets updates via post-messages
+    // never update this component, it will cause the iframe to refresh
+    return false;
   }
 
   setIframeBodyStyle(style) {