loading spinner for shorty fetch and qr-code

package.json

@@ -38,6 +38,8 @@
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.0",
+    "react-share": "^4.4.0",
+    "react-spinners": "^0.13.3",
     "reactour": "^1.18.7",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",

src/components/Workspace/ShareProject.js

@@ -4,15 +4,16 @@ import { connect } from "react-redux";
 import { shareProject } from "../../actions/projectActions";
 import { clearMessages } from "../../actions/messageActions";
 import QRCode from "react-qr-code";
-import axios from 'axios';
+// import axios from 'axios';
 
 import moment from "moment";
 
 import Dialog from "../Dialog";
 import Snackbar from "../Snackbar";
 
-import { Link } from "react-router-dom";
+// import { Link } from "react-router-dom";
 
+import GridLoader from "react-spinners/GridLoader";
 import { withStyles } from "@material-ui/core/styles";
 import IconButton from "@material-ui/core/IconButton";
 import Tooltip from "@material-ui/core/Tooltip";
@@ -58,6 +59,8 @@ class WorkspaceFunc extends Component {
       open: false,
       id: "",
       shortLink: "",
+      isFetching: false,
+      loading: false,
     };
   }
 
@@ -117,6 +120,7 @@ class WorkspaceFunc extends Component {
   };
 
   createShortlink(id) {
+    this.setState({ isFetching: true, loading: true })
     const requestOptions = {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -124,7 +128,7 @@ class WorkspaceFunc extends Component {
     };
     fetch('https://www.snsbx.de/api/shorty', requestOptions)
         .then(response => response.json())
-        .then(data => this.setState({ shortLink: data[0].link }));
+        .then(data => this.setState({ shortLink: data[0].link, isFetching: false, loading: false }));
   }
 
   render() {
@@ -153,15 +157,21 @@ class WorkspaceFunc extends Component {
           onClick={this.toggleDialog}
           button={Blockly.Msg.button_close}
         >            
+          { this.state.isFetching ? (
+            <div style={{ display: 'flex', justifyContent: 'center'}}>
+              <GridLoader color={"#4EAF47"} loading={this.state.loading} size={50} /> 
+            </div>
+            ) : (
               <div style={{ marginTop: "10px" }}>
                 <Typography>
                   Über den folgenden Link kannst du dein Programm teilen:
                 </Typography>
-            <Link
-              to={this.state.shortLink}
+                <a
+                  href={this.state.shortLink}
                   onClick={() => this.toggleDialog()}
                   className={this.props.classes.link}
-            >{this.state.shortLink}</Link>
+                  target="_blank"
+                >{this.state.shortLink}</a>
                 <Tooltip
                   title={Blockly.Msg.tooltip_copy_link}
                   arrow
@@ -186,13 +196,14 @@ class WorkspaceFunc extends Component {
                 <div style={{ display: 'flex', justifyContent: 'center' }}>
                   <QRCode value={this.state.shortLink} />
                 </div>
-            {this.props.project &&
+                { this.props.project &&
                   this.props.project.shared &&
                   this.props.message.id !== "SHARE_SUCCESS" ? (
                   <Typography
                     variant="body2"
                     style={{ marginTop: "20px" }}
-              >{`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${
+                  >
+                    {`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${
                       moment(this.props.project.shared).diff(
                         moment().utc(),
                         "days"
@@ -213,14 +224,20 @@ class WorkspaceFunc extends Component {
                           moment().utc(),
                           "days"
                         )} Tage`
-              } gültig.`}</Typography>
+                    } gültig.`}
+                  </Typography>
                   ) : (
                     <Typography
                       variant="body2"
                       style={{ marginTop: "20px" }}
-              >{`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`}</Typography>
-            )}
+                    >
+                      {`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`}
+                    </Typography>
+                  )
+                }
               </div> 
+            )
+          }
         </Dialog>
       </div>
     );