Better interface, loading icon

controllers/total/templates/total.pug

@@ -1,8 +1,46 @@
 extends ../../../templates/base.pug
 
 block content
-    #loading Loading... please wait
+    #loading
+        .center
+            .loader
+            div Loading your calendar, please wait...
+
+    #error(style="display:none;")
+        .row
+            .col-2
+            .col-8
+                .alert.alert-danger
+                    .row
+                        .col-8
+                            .center.btn
+                                <strong>Error:</strong> could not connect to calendar
+                        .col-4
+                            button#tryAgain.btn.btn-primary Click here to try again
+            .col-2
     #result
 
+block extracss
+    style.
+        .center {
+            text-align: center;
+        }
+
+        .loader {
+            display: inline-block;
+            text-align: center;
+            border: 16px solid #f3f3f3; /* Light grey */
+            border-top: 16px solid #3498db; /* Blue */
+            border-radius: 50%;
+            width: 120px;
+            height: 120px;
+            animation: spin 2s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
 block extrajs
     script(src="/static/js/totalTable.js")

controllers/total/views.js

@@ -40,7 +40,7 @@ module.exports.total = function(req, res, render) {
 module.exports.totalTable = function(req, res, render) {
     computeUserTable(req.session.user, (result) => {
         res.locals.courses = result.courses;
-        res.locals.total = total;
+        res.locals.total = result.total;
         render('totalTable.pug');
     });
 }

static/js/totalTable.js

@@ -1,9 +1,13 @@
 let loadingDiv = document.getElementById('loading');
+let errorDiv = document.getElementById('error');
 let resultDiv = document.getElementById('result');
-const timeout = 30000;
+const timeout = 10000;
 
 function getTable() {
     // Send XHR to totalTable
+    loadingDiv.style.display = "";
+    errorDiv.style.display = "none";
+
     let xhr = new XMLHttpRequest();
     xhr.timeout = timeout;
     xhr.onreadystatechange = function() {
@@ -17,17 +21,18 @@ function getTable() {
     };
     xhr.open('GET', '/total-table', true);
     xhr.send();
-    window.xhr = xhr;
 }
 
 function setData(text) {
     loadingDiv.style.display = "none";
+    errorDiv.style.display = "none";
     resultDiv.innerHTML = text;
 }
 
 function setError() {
     loadingDiv.style.display = "none";
-    resultDiv.innerHTML = "An error occured";
+    errorDiv.style.display = "";
 }
 
+document.getElementById('tryAgain').addEventListener('click', getTable);
 getTable();

templates/base.pug

@@ -12,6 +12,7 @@ html
                 body {
                     padding-top: 65px;
                 }
+        block extracss
         title ADEjs
     body
         nav.navbar.navbar-expand-lg.navbar-dark.bg-dark.fixed-top