Update removal of loader whether fetch was successful or not

views/dashboardPage/components/components.js

@@ -116,7 +116,6 @@ let recipeDetailsComp = {
         })
             .then((response) => response.json())
             .then((response)=>{
-                loader.style.display = "none";
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{
@@ -127,6 +126,9 @@ let recipeDetailsComp = {
             .catch((err)=>{
                 banner.createError("Something went wrong.  Please refresh the page");
             })
+            .finally(()=>{
+                loader.style.display = "none";
+            });
     },
 
     remove: function(){
@@ -284,7 +286,6 @@ let newOrderComp = {
         })
             .then(response => response.json())
             .then((response)=>{
-                loader.style.display = "none";
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{
@@ -303,6 +304,9 @@ let newOrderComp = {
             })
             .catch((err)=>{
                 banner.createError("Something went wrong.  Try refreshing the page");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
             });
     },
 }
@@ -340,7 +344,6 @@ let newIngredientComp = {
             })
                 .then((response) => response.json())
                 .then((response)=>{
-                    loader.style.display = "none";
                     if(typeof(response) === "string"){
                         banner.createError(response);
                     }else{
@@ -360,6 +363,9 @@ let newIngredientComp = {
                 .catch((err)=>{
                     console.log(err);
                     banner.createError("Something went wrong.  Try refreshing the page");
+                })
+                .finally(()=>{
+                    loader.style.display = "none";
                 });
         // }
     }
@@ -408,7 +414,6 @@ let orderDetailsComp = {
         })
             .then((response) => response.json())
             .then((response)=>{
-                loader.style.display = "none";
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{
@@ -418,6 +423,9 @@ let orderDetailsComp = {
             })
             .catch((err)=>{
                 banner.createError("Something went wrong, try refreshing the page");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
             });
     }
 }
@@ -437,7 +445,6 @@ let addIngredientsComp = {
             fetch("/ingredients")
                 .then((response) => response.json())
                 .then((response)=>{
-                    loader.style.display = "none";
                     if(typeof(response) === "string"){
                         banner.createError(response);
                     }else{
@@ -467,6 +474,9 @@ let addIngredientsComp = {
                 })
                 .catch((err)=>{
                     banner.createError("Unable to retrieve data");
+                })
+                .finally(()=>{
+                    loader.style.display = "none";
                 });
 
             this.isPopulated = true;
@@ -603,7 +613,6 @@ let addIngredientsComp = {
             body: JSON.stringify(fetchable)
         })
             .then((response)=>{
-                loader.style.display = "none";
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{
@@ -613,6 +622,9 @@ let addIngredientsComp = {
             })
             .catch((err)=>{
                 banner.createError("Something went wrong.  Try refreshing the page");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
             });
     }
 }
@@ -687,7 +699,6 @@ let ingredientDetailsComp = {
         })
             .then((response) => response.json())
             .then((response)=>{
-                loader.style.display = "none";
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{
@@ -695,7 +706,10 @@ let ingredientDetailsComp = {
                     merchant.editIngredients([this.ingredient], true);
                 }
             })
-            .catch((err)=>{});
+            .catch((err)=>{})
+            .finally(()=>{
+                loader.style.display = "none";
+            });
     },
 
     edit: function(){
@@ -724,7 +738,6 @@ let ingredientDetailsComp = {
             })
                 .then((response) => response.json())
                 .then((response)=>{
-                    loader.style.display = "none";
                     if(typeof(response) === "string"){
                         banner.createError(response);
                     }else{
@@ -734,6 +747,9 @@ let ingredientDetailsComp = {
                 })
                 .catch((err)=>{
                     banner.createError("Something went wrong, try refreshing the page");
+                })
+                .finally(()=>{
+                    loader.style.display = "none";
                 });
         }
     }
@@ -818,7 +834,6 @@ let newRecipeComp = {
         })
             .then((response) => response.json())
             .then((response)=>{
-                loader.style.display = "none";
                 if(typeof(response) === "string"){
                     banner.createError(response);
                 }else{
@@ -836,6 +851,9 @@ let newRecipeComp = {
             })
             .catch((err)=>{
                 banner.createError("Refresh page to update data");
+            })
+            .finally(()=>{
+                loader.style.display = "none";
             });
     },
 }

views/dashboardPage/home.js

@@ -168,7 +168,8 @@ window.homeStrandObj = {
             }
         }
 
-        document.getElementById("loaderContainer").style.display = "flex";
+        let loader = document.getElementById("loaderContainer");
+        loader.style.display = "flex";
         
         if(changes.length > 0){
             fetch("/merchant/ingredients/update", {
@@ -180,16 +181,17 @@ 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");
                     }
                 })
-                .catch((err)=>{});
+                .catch((err)=>{})
+                .finally(()=>{
+                    loader.style.display = "none";
+                });
         }
     }
 }

views/dashboardPage/orders.js

@@ -16,7 +16,6 @@ window.ordersStrandObj = {
             })
                 .then((response) => response.json())
                 .then((response)=>{
-                    loader.style.display = "none";
                     if(typeof(response) === "string"){
                         banner.createError(response);
                     }else{
@@ -37,6 +36,9 @@ window.ordersStrandObj = {
                 })
                 .catch((err)=>{
                     banner.createError("Unable to retrieve your orders at the moment");
+                })
+                .finally(()=>{
+                    loader.style.display = "none";
                 });
         }
     },