Add loading spinner to preview modal
This commit is contained in:
parent
595bdb241a
commit
0fee76a88e
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in New Issue