showing CircularProgress while compiling

src/components/Blockly/BlocklyComponent.css

@@ -1,6 +1,6 @@
 #blocklyDiv {
   height: 100%;
-  min-height: 700px;
+  min-height: 500px;
   width: 100%;
   /* border: 1px solid #4EAF47; */
   position: relative;

src/components/Compile.js

@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Backdrop from '@material-ui/core/Backdrop';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import Dialog from '@material-ui/core/Dialog';
+
+const styles = (theme) => ({
+  backdrop: {
+    zIndex: theme.zIndex.drawer + 1,
+    color: '#fff',
+  }
+});
+
+
+class Compile extends Component {
+
+  state = {
+    progress: false,
+    open: false
+  }
+
+  compile = () => {
+    const data = {
+      "board": process.env.REACT_APP_BOARD,
+      "sketch": this.props.arduino
+    };
+    this.setState({ progress: true });
+    fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, {
+      method: "POST",
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify(data)
+    })
+    .then(response => response.json())
+    .then(data => {
+      console.log(data)
+      this.download(data.data.id)
+    })
+    .catch(err => {
+      console.log(err);
+      this.setState({ progress: false, open: true });
+    });
+  }
+
+  download = (id) => {
+    const filename = 'sketch'
+    window.open(`${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`, '_self');
+    this.setState({ progress: false });
+  }
+
+  toggleDialog = () => {
+    this.setState({ open: !this.state });
+  }
+
+  render() {
+    return (
+      <div style={{display: 'inline'}}>
+        <Button style={{ float: 'right', color: 'white' }} variant="contained" color="primary" onClick={() => this.compile()}>
+          Compile
+        </Button>
+        <Backdrop className={this.props.classes.backdrop} open={this.state.progress}>
+          <CircularProgress color="inherit" />
+        </Backdrop>
+        <Dialog onClose={this.toggleDialog} open={this.state.open}>
+          <DialogTitle>Fehler</DialogTitle>
+          <DialogContent dividers>
+            Etwas ist beim Compilieren schief gelaufen. Versuche es nochmal.
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.toggleDialog} color="primary">
+              Schließen
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  };
+}
+
+Compile.propTypes = {
+  arduino: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  arduino: state.workspace.code.arduino
+});
+
+export default connect(mapStateToProps, null)(withStyles(styles, {withTheme: true})(Compile));

src/components/WorkspaceFunc.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import MaxBlocks from './MaxBlocks';
+import Compile from './Compile';
 
 import Button from '@material-ui/core/Button';
 import DialogTitle from '@material-ui/core/DialogTitle';
@@ -30,29 +31,6 @@ class WorkspaceFunc extends Component {
     this.setState({ open: !this.state });
   }
 
-  compile = () => {
-    const data = {
-      "board": process.env.REACT_APP_BOARD,
-      "sketch": this.props.arduino
-    };
-
-    fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, {
-      method: "POST",
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify(data)
-    })
-      .then(response => response.json())
-      .then(data => {
-        console.log(data)
-        this.download(data.data.id)
-      });
-  }
-
-  download = (id) => {
-    const filename = 'sketch'
-    window.open(`${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`, '_self');
-  }
-
   render() {
     return (
       <div style={{ marginTop: '20px' }}>
@@ -74,9 +52,7 @@ class WorkspaceFunc extends Component {
           Get XML Code
         </Button>
         <MaxBlocks />
-        <Button style={{ float: 'right', color: 'white' }} variant="contained" color="primary" onClick={() => this.compile()}>
+        <Compile />
-          Compile
-        </Button>
       </div>
     );
   };