Add spinner + Fix news arrangement

Author: igormcsouza

assets/js/fetch_news.js

@@ -11,6 +11,11 @@ fetch('http://localhost:8001/fetch', {
 	}
 }).then(function (data) {
 	// This is the JSON from our response
+    newsFromApi = document.getElementById("news-from-api")
+    loading = document.getElementById("news-from-api-loading")
+
+    newsFromApi.removeChild(loading)
+
     for (i in data['headlines']) {
         let htmlstring = `
         <div class="card-body">
@@ -25,10 +30,9 @@ fetch('http://localhost:8001/fetch', {
         `
         let div = document.createElement('div')
         div.innerHTML = htmlstring.trim()
-        div.className = "card col-sm-3 m-2"
-        div.style = "max-width: 15rem;"
+        div.className = "card col-lg-3 col-md-4 col-sm-6"
 
-        document.getElementById("news-from-api").appendChild(div)
+        newsFromApi.appendChild(div)
         if (i == 11) break
     }
 	console.log(data);

index.html

@@ -170,9 +170,17 @@ <h5 class="card-title">Pymetaheuristics</h5>
         </div>
       </div>
 
-      <div id="news-from-api" class="row d-flex justify-content-between"></div>
+      <div id="news-from-api" class="row d-flex justify-content-between mx-0">
+        <div id="news-from-api-loading" class="d-flex justify-content-center">
+          <div class="spinner-border text-secondary" style="width: 4rem; height: 4rem;" role="status">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="d-flex justify-content-center my-3">
+
+    <!-- Back to top -->
+    <div class="d-flex justify-content-center my-5">
       <a class="btn btn-seconday" role="button" href="#">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
           <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"/>