Add loading spinner to preview modal
This commit is contained in:
parent
595bdb241a
commit
0fee76a88e
1 changed files with 23 additions and 16 deletions
|
@ -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,7 +33,8 @@ 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 }>
|
||||||
|
<iframe onLoad={() => { this.setState({ loading: false }) }} title={ this.props.title ? this.props.title : "Preview" }
|
||||||
name="preview-iframe"
|
name="preview-iframe"
|
||||||
id="preview-iframe"
|
id="preview-iframe"
|
||||||
className="preview-iframe"
|
className="preview-iframe"
|
||||||
|
@ -43,7 +50,7 @@ class ModalPreview extends React.PureComponent {
|
||||||
}}
|
}}
|
||||||
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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue