Added loading indicator

app/js/components/addToken.js

@@ -3,7 +3,8 @@ import React, { Fragment, Component } from 'react';
 import ReactDOM from 'react-dom';
 import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
 import { Form, FormGroup, FormControl, InputGroup, Button, Grid, Row, Col, ControlLabel} from 'react-bootstrap';
- 
+import Spinner from 'react-spinkit';
+
 const emptyState = {
   fileToUpload: '',
   HP: '',
@@ -20,6 +21,7 @@ class AddToken extends Component {
     super(props);
 
     this.state = {
+      isSubmitting: false,
       fileToUpload: [],
       energy: '',
       lasers: '',
@@ -38,6 +40,8 @@ class AddToken extends Component {
 
     const { mint } = SpaceshipToken.methods;
 
+    this.setState({isSubmitting: true});
+
     // TODO:
     let attributes = {
     }
@@ -79,11 +83,17 @@ class AddToken extends Component {
         // TODO: show error blockchain
         
       })
+      .finally(() => {
+        this.setState({isSubmitting: false});
+      })
     })
     .catch((err) => {
       // TODO: show error uploading file
       console.error(err);
     })
+    .finally(() => {
+      this.setState({isSubmitting: false});
+    })
   }
 
   render(){
@@ -130,8 +140,11 @@ class AddToken extends Component {
                 </Col>
               </Row>
               <Row>
-                <Col sm={2} md={2}>
-                  <Button onClick={(e) => this.handleClick(e)}>Crear</Button>
+                <Col sm={1} md={1}>
+                  <Button disabled={this.state.isSubmitting} onClick={(e) => this.handleClick(e)}>Crear</Button>
+                </Col>
+                <Col sm={1} md={1}>
+                  { this.state.isSubmitting ? <Spinner name="wave" color="coral"/> : '' }
                 </Col>
               </Row>
             </FormGroup>

app/js/components/ship.js

@@ -4,13 +4,14 @@ import EmbarkJS from 'Embark/EmbarkJS';
 import web3 from "Embark/web3"
 import { Button } from 'react-bootstrap';
 import SpaceshipToken from 'Embark/contracts/SpaceshipToken';
-window.SpaceshipToken = SpaceshipToken;
+import Spinner from 'react-spinkit';
 class Ship extends Component {
 
     constructor(props){
         super(props);
         this.state = {
-            image: ''
+            image: '',
+            isSubmitting: false
         }
     }
 
@@ -32,6 +33,9 @@ class Ship extends Component {
     handleClick = () => {
         const { buySpaceship } = SpaceshipToken.methods;
         const toSend = buySpaceship(this.props.id)
+
+        this.setState({isSubmitting: true});
+
         toSend.estimateGas({value: this.props.price })
             .then(estimatedGas => {
                 return toSend.send({from: web3.eth.defaultAccount,
@@ -52,12 +56,15 @@ class Ship extends Component {
                 console.error(err);
                 // TODO: show error blockchain
                 
+            })
+            .finally(() => {
+                this.setState({isSubmitting: false});
             });
     }
 
     render(){
         const { energy, lasers, shield, price, wallet } = this.props;
-        const { image } = this.state;
+        const { image, isSubmitting } = this.state;
         
         const formattedPrice = !wallet ? web3.utils.fromWei(price, "ether") : '';
 
@@ -74,6 +81,7 @@ class Ship extends Component {
                 ? <Button bsStyle="success" onClick={this.handleClick}>Comprar</Button> 
                 : <Button bsStyle="success" onClick={this.handleClick}>Vender</Button>
              }
+             { isSubmitting ? <Spinner name="ball-pulse-sync" color="green"/> : '' }
             </div>;
     }
 }

package.json

@@ -13,8 +13,9 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-stage-2": "^6.24.1",
     "react": "^16.4.1",
-    "react-dom": "^16.4.1",
     "react-bootstrap": "^0.32.1",
+    "react-dom": "^16.4.1",
+    "react-spinkit": "^3.0.0",
     "zeppelin-solidity": "^1.10.0"
   }
 }