Add loader to all fetch statement

views/dashboardPage/components/components.js

@@ -104,6 +104,9 @@ let recipeDetailsComp = {
             });
         }
 
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
         fetch("/recipe/update", {
             method: "PUT",
             headers: {
@@ -113,6 +116,7 @@ let recipeDetailsComp = {
         })
             .then((response) => response.json())
             .then((response)=>{
+                loader.style.display = "none";
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{
@@ -267,6 +271,9 @@ let newOrderComp = {
             date: document.getElementById("orderDate").value,
             ingredients: ingredients
         }
+
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
         
         fetch("/order", {
             method: "POST",
@@ -277,6 +284,7 @@ let newOrderComp = {
         })
             .then(response => response.json())
             .then((response)=>{
+                loader.style.display = "none";
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{
@@ -319,6 +327,9 @@ let newIngredientComp = {
             quantity: document.querySelector("#newIngQuantity").value
         }
 
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
         if(validator.ingredient(newIngredient)){
             fetch("/ingredients/create", {
                 method: "POST",
@@ -329,6 +340,7 @@ let newIngredientComp = {
             })
                 .then((response) => response.json())
                 .then((response)=>{
+                    loader.style.display = "none";
                     if(typeof(response) === "string"){
                         banner.createError(response);
                     }else{
@@ -384,6 +396,9 @@ let orderDetailsComp = {
     },
 
     remove: function(order){
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
         fetch(`/order/${order.id}`, {
             method: "DELETE",
             headers: {
@@ -392,6 +407,7 @@ let orderDetailsComp = {
         })
             .then((response) => response.json())
             .then((response)=>{
+                loader.style.display = "none";
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{
@@ -414,9 +430,13 @@ let addIngredientsComp = {
         let sidebar = document.querySelector("#addIngredients");
 
         if(!this.isPopulated){
+            let loader = document.getElementById("loaderContainer");
+            loader.style.display = "flex";
+
             fetch("/ingredients")
                 .then((response) => response.json())
                 .then((response)=>{
+                    loader.style.display = "none";
                     if(typeof(response) === "string"){
                         banner.createError(response);
                     }else{
@@ -571,6 +591,9 @@ let addIngredientsComp = {
             });
         }
 
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
         fetch("/merchant/ingredients/add", {
             method: "POST",
             headers: {
@@ -579,6 +602,7 @@ let addIngredientsComp = {
             body: JSON.stringify(fetchable)
         })
             .then((response)=>{
+                loader.style.display = "none";
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{
@@ -654,11 +678,15 @@ let ingredientDetailsComp = {
             }
         }
 
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
         fetch(`/merchant/ingredients/remove/${this.ingredient.ingredient.id}`, {
             method: "DELETE",
         })
             .then((response) => response.json())
             .then((response)=>{
+                loader.style.display = "none";
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{
@@ -682,6 +710,9 @@ let ingredientDetailsComp = {
             quantity: this.ingredient.quantity
         }];
 
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
         if(validator.ingredientQuantity(data[0].quantity)){
             fetch("/merchant/ingredients/update", {
                 method: "PUT",
@@ -692,6 +723,7 @@ let ingredientDetailsComp = {
             })
                 .then((response) => response.json())
                 .then((response)=>{
+                    loader.style.display = "none";
                     if(typeof(response) === "string"){
                         banner.createError(response);
                     }else{
@@ -773,6 +805,9 @@ let newRecipeComp = {
             return;
         }
 
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
+
         fetch("/recipe/create", {
             method: "POST",
             headers: {
@@ -782,6 +817,7 @@ let newRecipeComp = {
         })
             .then((response) => response.json())
             .then((response)=>{
+                loader.style.display = "none";
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{

views/dashboardPage/dashboard.ejs

@@ -209,6 +209,7 @@
             <% include ./components/newOrder %>
         </div>
 
+        <% include ../shared/loader %>
 
         <script src="/dashboardPage/Merchant.js"></script>
         <script>

views/dashboardPage/home.js

@@ -167,6 +167,8 @@ window.homeStrandObj = {
                 return;
             }
         }
+
+        document.getElementById("loaderContainer").style.display = "flex";
         
         if(changes.length > 0){
             fetch("/merchant/ingredients/update", {
@@ -178,9 +180,11 @@ window.homeStrandObj = {
             })
                 .then((response) => response.json())
                 .then((response)=>{
+                    document.getElementById("loaderContainer").style.display = "none";
                     if(typeof(response.data) === "string"){
                         banner.createError(response.data);
                     }else{
+                        
                         merchant.editIngredients(changes);
                         banner.createNotification("Ingredients updated");
                     }

views/dashboardPage/orders.js

@@ -5,6 +5,9 @@ window.ordersStrandObj = {
         if(!this.isFetched){
             window.orders = [];
 
+            let loader = document.getElementById("loaderContainer");
+            loader.style.display = "flex";
+
             fetch("/order", {
                 method: "GET",
                 headers: {
@@ -13,6 +16,7 @@ window.ordersStrandObj = {
             })
                 .then((response) => response.json())
                 .then((response)=>{
+                    loader.style.display = "none";
                     if(typeof(response) === "string"){
                         banner.createError(response);
                     }else{

views/shared/loader.ejs

@@ -0,0 +1,8 @@
+<div id="loaderContainer" style="display: none">
+    <div class="loader">
+        <div class="outer"></div>
+        <div class="mid"></div>
+        <div class="inner"></div>
+        <img src="../shared/images/logo.png" alt="subline">
+    </div>
+</div>

views/shared/shared.css

@@ -8,11 +8,95 @@ body{
     min-height: 100vh;
 }
 
+/* Loader */
+#loaderContainer{
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 27, 45, 0.5);
+    z-index: 2;
+    position: fixed;
+}
+
+.loader{
+    margin-bottom: 200px;
+    margin-right: 100px;
+}
+
+.loader .outer{
+    border: 10px solid rgba(255, 255, 255, 0);
+    border-top: 10px solid rgba(255, 99, 107, 0.8);
+    border-bottom: 10px solid rgba(255, 99, 107, 0.8);
+    border-radius: 50%;
+    height: 80px;
+    width: 80px;
+    animation: spin1 2s infinite;
+    position: absolute;
+}
+
+.loader .mid{
+    border: 10px solid rgba(255, 255, 255, 0);
+    border-right: 10px solid rgba(0, 27, 45, 0.8);
+    border-left: 10px solid rgba(0, 27, 45, 0.8);
+    border-radius: 50%;
+    height: 60px;
+    width: 60px;
+    margin: 10px 0 0 10px;
+    animation: spin2 2s infinite;
+    position: absolute;
+}
+
+.loader .inner{
+    border: 10px solid rgba(255, 255, 255, 0);
+    border-top: 10px solid rgba(179, 191, 209, 0.8);
+    border-bottom: 10px solid rgba(179, 191, 209, 0.8);
+    border-radius: 50%;
+    height: 40px;
+    width: 40px;
+    margin: 20px 0 0 20px;
+    animation: spin3 2s infinite;
+    position: absolute;
+}
+
+.loader img{
+    margin: 10px 0 0 10px;
+    height: 70px;
+    width: 80px;
+    position: absolute;
+    z-index: -1;
+    animation: imgSpin 3s linear infinite;
+}
+
+@keyframes spin1{
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes spin2{
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(720deg); }
+}
+
+@keyframes spin3{
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(1080deg); }
+}
+
+@keyframes imgSpin{
+    0% { 
+        transform: rotateY(0deg);
+    }
+
+    100% { 
+        transform: rotateY(360deg);
+    }
+}
+
 /* General style that should apply to all pages */
 h1 {
     text-align: center;
     padding-bottom: 13px;
-
 }
 
 h3 {