prealoader orders

dist/public/css/style.css

@@ -45,6 +45,63 @@ hr {
 
 /* Custom Styles */
 
+@keyframes fadein {
+    from {
+        opacity:0;
+    }
+    to {
+        opacity:1;
+    }
+}
+@-moz-keyframes fadein { /* Firefox */
+    from {
+        opacity:0;
+    }
+    to {
+        opacity:1;
+    }
+}
+@-webkit-keyframes fadein { /* Safari and Chrome */
+    from {
+        opacity:0;
+    }
+    to {
+        opacity:1;
+    }
+}
+@-o-keyframes fadein { /* Opera */
+    from {
+        opacity:0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.loader-fullscreen {
+    background-color: #000;
+    background-color: rgba(0,0,0,.8);
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    z-index: 999;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    animation: fadein 0.1s;
+    -moz-animation: fadein 0.1s; /* Firefox */
+    -webkit-animation: fadein 0.1s; /* Safari and Chrome */
+    -o-animation: fadein 0.1s; /* Opera */
+}
+
+.loader-fullscreen__wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
 .pagination {
     padding-bottom: 24px;
 }

dist/views/main/my-orders.pug

@@ -7,6 +7,19 @@ main.main-section
   include ./assets/templates/modals/cart.pug
   include ./assets/templates/modals/pay.pug
   #notification
+  #loader.loader-fullscreen.hide
+    .loader-fullscreen__wrap
+      <div class="preloader-wrapper big active">
+      <div class="spinner-layer spinner-green-only">
+        <div class="circle-clipper left">
+          <div class="circle"></div>
+        </div><div class="gap-patch">
+          <div class="circle"></div>
+        </div><div class="circle-clipper right">
+          <div class="circle"></div>
+        </div>
+      </div>
+    </div>
   .container
     .row
       .col.s12

src/main/components/orders.component.js

@@ -2,9 +2,10 @@ import { Component } from "../core/component";
 import axios from "axios";
 
 export class OrdersComponent extends Component {
-    constructor(id, {notification}) {
+    constructor(id, {notification}, {loader}) {
         super(id);
         this.notification = notification;
+        this.loader = loader;
     }
 
     init() {
@@ -14,6 +15,7 @@ export class OrdersComponent extends Component {
                 e.preventDefault();
                 if (valid) {
                     valid = false;
+                    this.loader.show();
                     const email = e.target.elements.email.value,
                         request = await axios.post('/my-orders', {email});
                     
@@ -30,6 +32,7 @@ export class OrdersComponent extends Component {
                         default:
                             break;
                     }
+                    this.loader.hide();
                     setTimeout(() => valid = true, 10000);
                 } else {
                     this.notification.notificate(`Подождите еще нескольно секунд прежде чем сделать запрос...`, '#f44336', 3500);

src/main/index.js

@@ -20,7 +20,7 @@ const items = new ItemsComponent('items', {loader}, {notification});
 const filter = new FilterComponent('filter', {items});
 const category = new CategoryComponent('category', {items}, {filter});
 const breadcumb = new BreadcrumbComponent('breadcrumb');
-const orders = new OrdersComponent('orders', {notification});
+const orders = new OrdersComponent('orders', {notification}, {loader});
 
 // Modals
 const cart = new CartModal('cart', 'cartOpen', 'cartClose', {items});