Fix re-rendering of iframe by removing state dependency for spinner

frontend/my/src/ModalPreview.js

@@ -5,10 +5,6 @@ import * as cs from "./constants"
 import { Spin } from "antd"
 
 class ModalPreview extends React.PureComponent {
-    state = {
-        loading: true
-    }
-
     makeForm(body) {
         let form = document.createElement("form")
         form.method = cs.MethodPost
@@ -33,24 +29,38 @@ class ModalPreview extends React.PureComponent {
                 onCancel={ this.props.onCancel }
                 onOk={ this.props.onCancel }>
                 <div className="preview-iframe-container">
-                    <Spin spinning={ this.state.loading }>
-                        <iframe onLoad={() => { this.setState({ loading: false }) }} title={ this.props.title ? this.props.title : "Preview" }
+                        <Spin className="preview-iframe-spinner"></Spin>
+                        <iframe key="xxxxxxxxx" onLoad={() => {
+                            // If state is used to manage the spinner, it causes
+                            // the iframe to re-render and reload everything.
+                            // Hack the spinner away from the DOM directly instead.
+                            let spin = document.querySelector(".preview-iframe-spinner")
+                            if(spin) {
+                                spin.parentNode.removeChild(spin)
+                            }
+                            // this.setState({ loading: false })
+                        }} title={ this.props.title ? this.props.title : "Preview" }
                             name="preview-iframe"
                             id="preview-iframe"
                             className="preview-iframe"
                             ref={(o) => {
-                                if(o) {
-                                    // When the DOM reference for the iframe is ready,
-                                    // see if there's a body to post with the form hack.
-                                    if(this.props.body !== undefined
-                                        && this.props.body !== null) {
-                                        this.makeForm(this.props.body)
+                                if(!o) {
+                                    return
+                                }
+
+                                // When the DOM reference for the iframe is ready,
+                                // see if there's a body to post with the form hack.
+                                if(this.props.body !== undefined
+                                    && this.props.body !== null) {
+                                    this.makeForm(this.props.body)
+                                } else {
+                                    if(this.props.previewURL) {
+                                        o.src = this.props.previewURL
                                     }
                                 }
                             }}
-                            src={ this.props.previewURL ? this.props.previewURL : "about:blank" }>
+                            src="about:blank">
                         </iframe>
-                    </Spin>
                 </div>
             </Modal>
 

frontend/my/src/index.css

@@ -256,6 +256,14 @@ td.actions {
   .preview-iframe-container {
     min-height: 500px;
   }
+  .preview-iframe-spinner {
+    position: absolute !important;
+    width: 40px;
+    height: 40px;
+    left: calc(50% - 40px);
+    top: calc(30%);
+    /* top: 15px; */
+  }
   .preview-iframe {
     border: 0;
     width: 100%;