show loading icon

src/client/js/components/PageEditor/DrawioModal.jsx

@@ -12,12 +12,6 @@ export default class DrawioModal extends React.PureComponent {
     this.state = {
       show: false,
       drawioMxFile: '',
-      // style: {
-      //   zIndex: 9999,
-      //   top: 0,
-      //   left: 0,
-      //   bottom: 0,
-      // },
     };
 
     this.drawioIFrame = React.createRef();
@@ -44,13 +38,6 @@ export default class DrawioModal extends React.PureComponent {
   show(drawioMxFile) {
     this.init(drawioMxFile);
 
-    // this.setState({
-    //   style: Object.assign({}, this.state.style, {
-    //     width: window.innerWidth,
-    //     height: window.innerHeight,
-    //   }),
-    // });
-
     // window.addEventListener('resize', this.onResizeWindow);
     window.addEventListener('message', this.receiveFromDrawio);
     this.setState({ show: true });
@@ -126,15 +113,6 @@ export default class DrawioModal extends React.PureComponent {
     // NOTHING DONE. (Receive unknown iframe message.)
   }
 
-  // onResizeWindow(event) {
-  //   this.setState({
-  //     style: Object.assign({}, this.state.style, {
-  //       width: window.innerWidth,
-  //       height: window.innerHeight,
-  //     }),
-  //   });
-  // }
-
   drawioURL() {
     const url = new URL('https://www.draw.io/');
 
@@ -151,19 +129,22 @@ export default class DrawioModal extends React.PureComponent {
   render() {
     return (
       // <Modal show={this.state.show} onHide={this.cancel} bsSize="large" dialogClassName={dialogClassName} keyboard={false}>
-      <Modal show={this.state.show} onHide={this.cancel} bsSize="large" keyboard={false}>
-        <Modal.Body className="p-0 d-flex flex-column">
-          <div id="iframe-drawio-container">
-            {
-              this.state.show
-              && (
-                <iframe
-                  ref={(c) => { this.drawioIFrame = c }}
-                  src={this.drawioURL()}
-                >
-                </iframe>
-              )
-            }
+      <Modal show={this.state.show} onHide={this.cancel} dialogClassName="drawio-modal" bsSize="large" keyboard={false}>
+        <Modal.Body className="p-0">
+          <div className="w-100 h-100 position-absolute d-flex">
+            <div className="mx-auto my-auto">
+              <i className="fa fa-3x fa-spinner fa-pulse mx-auto text-muted"></i>
+            </div>
+          </div>
+          <div className="w-100 h-100 position-absolute d-flex">
+            { this.state.show && (
+              <iframe
+                ref={(c) => { this.drawioIFrame = c }}
+                src={this.drawioURL()}
+                className="border-0"
+              >
+              </iframe>
+            ) }
           </div>
         </Modal.Body>
       </Modal>

src/client/styles/scss/_drawio.scss

@@ -1,7 +1,8 @@
-#iframe-drawio-container > iframe {
-  width: 100vw;
-  // height: calc(100vh - #{$header-plus-footer});
-  // min-height: calc(100vh - #{$header-plus-footer}); // for IE11
-  height: calc(100vh - 0);
-  min-height: calc(100vh - 0); // for IE11
+.drawio-modal {
+  @include expand-modal-fullscreen(false, false);
+
+  // expand iframe with flexbox
+  iframe {
+    flex: 1;
+  }
 }