add loader

public/js/cart.js

+const loaderElem = document.querySelector('.loader');
+
 class Cart {
     constructor(cartElem) {
         this.cartHtmlElem = cartElem;
@@ -56,6 +58,8 @@ class Cart {
             const actionUrl = e.target.dataset.action;
             const productId = e.target.dataset.productId;
 
+            loaderElem.classList.toggle('loader-show');
+
             axios.post(actionUrl, {
                 productId: productId,
             })
@@ -68,10 +72,12 @@ class Cart {
 
                     document.querySelector('.js-cart').removeEventListener('click', this.bindedRemoveItemFromCart);
                     this.show();
+                    loaderElem.classList.toggle('loader-show');
                     toastr.success('Product deleted');
                 })
                 .catch(function (error) {
                     console.log(error);
+                    loaderElem.classList.toggle('loader-show');
                     toastr.error('Error, something went wrong');
                 });
         }
@@ -89,24 +95,25 @@ class Cart {
                 const actionUrl = this.updateItemUrl;
                 const productId = event.target.dataset.productId;
 
-                setTimeout(() => {
-                    axios.post(actionUrl, {
-                        productId: productId,
-                        changedQty: event.target.value,
+                loaderElem.classList.toggle('loader-show');
+
+                axios.post(actionUrl, {
+                    productId: productId,
+                    changedQty: event.target.value,
+                })
+                    .then( (response) => {
+                        document.querySelector('.js-cart').removeEventListener('click', this.bindedRemoveItemFromCart);
+                        this.show();
+                        loaderElem.classList.toggle('loader-show');
+                        toastr.success('Quantity updated');
                     })
-                        .then( (response) => {
-                            document.querySelector('.js-cart').removeEventListener('click', this.bindedRemoveItemFromCart);
-                            this.show();
-                            toastr.success('Quantity updated');
-                        })
-                        .catch(function (error) {
-                            console.log(error);
-                            toastr.error('Error, something went wrong');
-                        });
-
-                    isChanged = false;
-
-                }, 1000);
+                    .catch(function (error) {
+                        console.log(error);
+                        loaderElem.classList.toggle('loader-show');
+                        toastr.error('Error, something went wrong');
+                    });
+
+                isChanged = false;
             });
         });
     }
@@ -117,6 +124,8 @@ class Cart {
     }
 
     show() {
+        loaderElem.classList.toggle('loader-show');
+
         axios.get(this.getItemsUrl)
             .then( response => {
                 const redirectLinkWhenEmpty = response.data.redirectLinkWhenEmpty;
@@ -133,11 +142,13 @@ class Cart {
                 this.itemUrl = response.data.item_url;
 
                 this.showProducts();
+                loaderElem.classList.toggle('loader-show');
                 this.events();
             })
             .catch(function (error) {
                 console.log(error);
-                alert('Something went wrong');
+                loaderElem.classList.toggle('loader-show');
+                toastr.error('Error, something went wrong');
             });
     }
 }

public/js/product.js

+const loaderElem = document.querySelector('.loader');
+
 function setAddToCardEventListener() {
     document.querySelector('.js-btn-add-to-basket').addEventListener('click', function(e) {
         const actionUrl = this.dataset.action;
 
+        loaderElem.classList.toggle('loader-show');
+
         axios.post(actionUrl)
             .then(function (response) {
                 const cartAmountElem = document.querySelector('.amount-in-cart');
                 cartAmountElem.textContent = response.data;
+                loaderElem.classList.toggle('loader-show');
                 toastr.success('Product added to cart');
             })
             .catch(function (error) {
                 console.log(error);
+                loaderElem.classList.toggle('loader-show');
                 toastr.error('Error, something went wrong');
             });
     });

public/js/welcome.js

+const loaderElem = document.querySelector('.loader');
+
 function setAddToCardEventListener() {
     document.querySelector('.products').addEventListener('click', function(e) {
         if (!e.target.classList.contains('js-btn-add-to-basket')) return;
 
         const actionUrl = e.target.dataset.action;
 
+        loaderElem.classList.toggle('loader-show');
+
         axios.post(actionUrl)
             .then(function (response) {
                 const cartAmountElem = document.querySelector('.amount-in-cart');
                 cartAmountElem.textContent = response.data;
+                loaderElem.classList.toggle('loader-show');
                 toastr.success('Product added to cart');
             })
             .catch(function (error) {
                 console.log(error);
+                loaderElem.classList.toggle('loader-show');
                 toastr.error('Error, something went wrong');
             });
     });

public/mix-manifest.json

 {
-    "/js/app.js": "/js/app.js"
+    "/css/app.css": "/css/app.css"
 }

resources/sass/app.scss

@@ -21,3 +21,28 @@ ul {
 .main {
     padding-top: 80px;
 }
+
+.loader {
+    display: none;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0; left: 0;
+    z-index: 1;
+}
+
+.loader__background {
+    height: 100%;
+    background-color: lightgrey;
+    opacity: 0.6;
+}
+
+.loader__img {
+    position: absolute;
+    left: 50%; top: 20%;
+    transform: translateX(-50%);
+}
+
+.loader-show {
+    display: block;
+}

resources/views/layouts/app.blade.php

@@ -23,6 +23,11 @@
         @include('partials.header')
 
         <main class="main">
+            <div class="loader">
+                <div class="loader__background"></div>
+                <img class="loader__img" src="{{asset('img/loader.gif')}}">
+            </div>
+
             @yield('content')
         </main>
     </div>

webpack.mix.js

@@ -12,6 +12,6 @@ const mix = require('laravel-mix');
  */
 
 mix/*.js('resources/js/app.js', 'public/js')*/
-    // .sass('resources/sass/app.scss', 'public/css')
-    .sass('resources/sass/welcome.scss', 'public/css')
-    .browserSync('http://127.0.0.1:8000/');
+    .sass('resources/sass/app.scss', 'public/css');
+    // .sass('resources/sass/welcome.scss', 'public/css')
+    // .browserSync('http://127.0.0.1:8000/');