fix(DIST-713): Force iframe redraw onLoad (#146)

src/core/views/components/iframe.js

@@ -9,6 +9,7 @@ class Iframe extends Component {
 
     this.iframeRef = null
     this.handleLoad = this.handleLoad.bind(this)
+    this.triggerIframeRedraw = this.triggerIframeRedraw.bind(this)
     this.getRef = this.getRef.bind(this)
   }
 
@@ -20,8 +21,32 @@ class Iframe extends Component {
     this.iframeRef = node
   }
 
-  handleLoad() {
-    this.props.onLoad && this.props.onLoad(this.iframeRef)
+  async handleLoad() {
+    this.props.onLoad(this.iframeRef)
+    await this.triggerIframeRedraw()
+  }
+
+  /**
+   * Tell browser to redraw the iframe. DIST-713.
+   *
+   */
+  triggerIframeRedraw() {
+    return new Promise((resolve, reject) => {
+      if (!this.iframeRef) {
+        resolve()
+        return
+      }
+
+      try {
+        this.iframeRef.style.display = 'none'
+        setTimeout(() => {
+          this.iframeRef.style.display = 'block'
+          resolve()
+        })
+      } catch (err) {
+        reject(err)
+      }
+    })
   }
 
   render() {
@@ -50,4 +75,8 @@ Iframe.propTypes = {
   style: PropTypes.object,
 }
 
+Iframe.defaultProps = {
+  onLoad: () => {},
+}
+
 export default Iframe

src/core/views/components/iframe.spec.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import Enzyme, { shallow } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+import Iframe from './iframe'
+
+Enzyme.configure({ adapter: new Adapter() })
+
+describe('Iframe test suite', () => {
+  it('Trigger iframe redraw right after load', async () => {
+    const triggerIframeRedrawReal = Iframe.prototype.triggerIframeRedraw
+    const triggerIframeRedrawMock = jest.fn(() => Promise.resolve())
+
+    Iframe.prototype.triggerIframeRedraw = triggerIframeRedrawMock
+    const popup = shallow(<Iframe src="example.com" />)
+    await popup.instance().handleLoad()
+
+    Iframe.prototype.triggerIframeRedraw = triggerIframeRedrawReal
+    expect(triggerIframeRedrawMock).toHaveBeenCalledTimes(1)
+  })
+})