From 0fee76a88e2dd7546ab869a93ea207e3d8c6c3d7 Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Fri, 2 Nov 2018 00:14:43 +0530
Subject: [PATCH] Add loading spinner to preview modal

---
 frontend/my/src/ModalPreview.js | 39 +++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/frontend/my/src/ModalPreview.js b/frontend/my/src/ModalPreview.js
index 39051e8..6e35e34 100644
--- a/frontend/my/src/ModalPreview.js
+++ b/frontend/my/src/ModalPreview.js
@@ -2,7 +2,13 @@ import React from "react"
 import { Modal } from "antd"
 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
@@ -27,23 +33,24 @@ class ModalPreview extends React.PureComponent {
                 onCancel={ this.props.onCancel }
                 onOk={ this.props.onCancel }>
                 <div className="preview-iframe-container">
-                    <iframe 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)
+                    <Spin spinning={ this.state.loading }>
+                        <iframe onLoad={() => { 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)
+                                    }
                                 }
-                            }
-                        }}
-                        src={ this.props.previewURL ? this.props.previewURL : "about:blank" }>
-                    </iframe>
- 
+                            }}
+                            src={ this.props.previewURL ? this.props.previewURL : "about:blank" }>
+                        </iframe>
+                    </Spin>
                 </div>
             </Modal>