hangar-tech
/
listmonk
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add loading spinner to preview modal

This commit is contained in:
Kailash Nadh 2018-11-02 00:14:43 +05:30
parent 595bdb241a
commit 0fee76a88e
1 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/my/src/ModalPreview.js
View File

@ -2,7 +2,13 @@ import React from "react"
import { Modal } from "antd" import { Modal } from "antd"
import * as cs from "./constants" import * as cs from "./constants"
import { Spin } from "antd"
class ModalPreview extends React.PureComponent { class ModalPreview extends React.PureComponent {
state = {
loading: true
}
makeForm(body) { makeForm(body) {
let form = document.createElement("form") let form = document.createElement("form")
form.method = cs.MethodPost form.method = cs.MethodPost
@ -27,23 +33,24 @@ class ModalPreview extends React.PureComponent {
onCancel={ this.props.onCancel } onCancel={ this.props.onCancel }
onOk={ this.props.onCancel }> onOk={ this.props.onCancel }>
<div className="preview-iframe-container"> <div className="preview-iframe-container">
<iframe title={ this.props.title ? this.props.title : "Preview" } <Spin spinning={ this.state.loading }>
name="preview-iframe" <iframe onLoad={() => { this.setState({ loading: false }) }} title={ this.props.title ? this.props.title : "Preview" }
id="preview-iframe" name="preview-iframe"
className="preview-iframe" id="preview-iframe"
ref={(o) => { className="preview-iframe"
if(o) { ref={(o) => {
// When the DOM reference for the iframe is ready, if(o) {
// see if there's a body to post with the form hack. // When the DOM reference for the iframe is ready,
if(this.props.body !== undefined // see if there's a body to post with the form hack.
&& this.props.body !== null) { if(this.props.body !== undefined
this.makeForm(this.props.body) && this.props.body !== null) {
this.makeForm(this.props.body)
}
} }
} }}
}} src={ this.props.previewURL ? this.props.previewURL : "about:blank" }>
src={ this.props.previewURL ? this.props.previewURL : "about:blank" }> </iframe>
</iframe> </Spin>
</div> </div>
</Modal> </Modal>