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,7 +95,8 @@ class Cart {
                 const actionUrl = this.updateItemUrl;
                 const productId = event.target.dataset.productId;
 
-                setTimeout(() => {
+                loaderElem.classList.toggle('loader-show');
+
                 axios.post(actionUrl, {
                     productId: productId,
                     changedQty: event.target.value,
@@ -97,16 +104,16 @@ class Cart {
                     .then( (response) => {
                         document.querySelector('.js-cart').removeEventListener('click', this.bindedRemoveItemFromCart);
                         this.show();
+                        loaderElem.classList.toggle('loader-show');
                         toastr.success('Quantity updated');
                     })
                     .catch(function (error) {
                         console.log(error);
+                        loaderElem.classList.toggle('loader-show');
                         toastr.error('Error, something went wrong');
                     });
 
                 isChanged = false;
-
-                }, 1000);
             });
         });
     }
@@ -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/');