From 1c675a0b79f089789d934b55668a99bef897c143 Mon Sep 17 00:00:00 2001
From: Max Prilutskiy <prilutskiy@users.noreply.github.com>
Date: Thu, 4 Feb 2021 14:37:38 +0200
Subject: [PATCH] fix(DIST-713): Force iframe redraw onLoad (#146)

---
 src/core/views/components/iframe.js      | 33 ++++++++++++++++++++++--
 src/core/views/components/iframe.spec.js | 21 +++++++++++++++
 2 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 src/core/views/components/iframe.spec.js

diff --git a/src/core/views/components/iframe.js b/src/core/views/components/iframe.js
index 2eb8bab1..0aaadb83 100644
--- a/src/core/views/components/iframe.js
+++ b/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
diff --git a/src/core/views/components/iframe.spec.js b/src/core/views/components/iframe.spec.js
new file mode 100644
index 00000000..7e28d2f9
--- /dev/null
+++ b/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)
+  })
+})