component: add Spinner component while making an order request

src/components/UI/Modal/Modal.js

@@ -7,7 +7,7 @@ import classes from './Modal.css';
 class Modal extends Component {
 
     shouldComponentUpdate(nextProps, nextState){
-        return nextProps.show !== this.props.show;
+        return nextProps.show !== this.props.show || nextProps.children !== this.props.children;
     }
 
     render() {

src/components/UI/Spinner/Spinner.css

@@ -0,0 +1,41 @@
+.Loader,
+.Loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.Loader {
+  margin: 60px auto;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(195,8,247, 0.2);
+  border-right: 1.1em solid rgba(195,8,247, 0.2);
+  border-bottom: 1.1em solid rgba(195,8,247, 0.2);
+  border-left: 1.1em solid #c308f7;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

src/components/UI/Spinner/Spinner.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import classes from './Spinner.css';
+
+const spinner = () => (
+    <div className={classes.Loader}>Loading...</div>
+);
+
+export default spinner;

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -5,6 +5,7 @@ import Burger from '../../components/Burger/Burger';
 import BuildControls from '../../components/Burger/BuildControls/BuildControls';
 import Modal from '../../components/UI/Modal/Modal';
 import OrderSummary from '../../components/Burger/OrderSummary/OrderSummary';
+import Spinner from '../../components/UI/Spinner/Spinner';
 import axios from '../../axios-orders';
 
 const INGREDIENT_PRICE = {
@@ -26,6 +27,7 @@ class BurgerBuilder extends Component {
         totalPrice: 0,
         purchasable: false,
         purchasing: false,
+        loading: false,
     }
 
     updatePurchaseState(ingredients) {
@@ -88,6 +90,9 @@ class BurgerBuilder extends Component {
     }
 
     purchaseContinueHandler = () => {
+        this.setState({
+            loading: true,
+        });
         const order = {
             ingredients: this.state.ingredients,
             price: this.state.totalPrice,
@@ -103,8 +108,12 @@ class BurgerBuilder extends Component {
         };
 
         axios.post('/order.json', order)
-        .then(response => console.log(response))
-        .catch(error => console.log(error));
+            .then(response => {
+                this.setState({ loading: false });
+            })
+            .catch(error => {
+                this.setState({ loading: false });
+            });
     }
 
     render() {
@@ -116,16 +125,23 @@ class BurgerBuilder extends Component {
             disabledInfo[key] = disabledInfo[key] <= 0;
         }
 
+        let orderSummary = <OrderSummary
+            ingredients={this.state.ingredients}
+            price={this.state.totalPrice}
+            purchaseCancalled={this.purchaseCancelHandler}
+            purchaseContinued={this.purchaseContinueHandler}></OrderSummary>;
+
+
+        if (this.state.loading) {
+            orderSummary = <Spinner />
+        }
+
         return (
             <Aux>
                 <Modal
                     show={this.state.purchasing}
                     modalClosed={this.purchaseCancelHandler}>
-                    <OrderSummary
-                        ingredients={this.state.ingredients}
-                        price={this.state.totalPrice}
-                        purchaseCancalled={this.purchaseCancelHandler}
-                        purchaseContinued={this.purchaseContinueHandler}></OrderSummary>
+                    {orderSummary}
                 </Modal>
                 <Burger ingredients={this.state.ingredients} />
                 <BuildControls