Trend med loader

client/secondViewClient.js

@@ -20,19 +20,34 @@ function setupPage() {
 }
 
 let tbody = null;
+let genresCountDown = [];
 
 function fetchAndShowTrends() {
+  genresCountDown = genres.slice(); // kopiera genres arrayen
+
   tbody = document.querySelector("#trend-table tbody");
   tbody.innerHTML = ""; // radera föregående innehåll
 
   showElement("loader");
 
-  genres.forEach((genre) => {
-    console.log("Fetch genre rating " + genre);
-    fetchGenreMeanRating(genre);
-  });
+  fetchNextGenre();
+
+  // genres.forEach((genre) => {
+  //   console.log("Fetch genre rating " + genre);
+  //   fetchGenreMeanRating(genre);
+  // });
+
+  // hideElement("loader");
+}
 
-  hideElement("loader");
+function fetchNextGenre() {
+  if (genresCountDown.length == 0) {
+    hideElement("loader");
+    return;
+  }
+  let genre = genresCountDown.shift();
+  console.log("Fetch genre rating for" + genre);
+  fetchGenreMeanRating(genre);
 }
 
 function fetchGenreMeanRating(genre) {
@@ -49,6 +64,7 @@ function showGenreMeanRating(data) {
   let rating = data.rating;
   tbody.innerHTML +=
     "<tr><td>" + genre + "</td><td>" + rating.toFixed(2) + "</td></tr>";
+  fetchNextGenre();
 }
 
 let genres = [