Adding a spinner to cursor when loading a page instead of putting the page to blank

2 files changed, 29 insertions, 17 deletions

diff --git a/router.js b/router.js
index 234c50b..8af98ab 100644
--- a/router.js
+++ b/router.js
@@ -1,5 +1,30 @@
 (function () {
 
+  this.addEventListener('hashchange', router);
+  this.addEventListener('load', router);
+
+  function router() {
+    var url = location.hash.slice(2) || 'presentation';
+    var contentElement = document.getElementById('content');
+    var htmlElement = document.querySelector('html');
+    addClass(htmlElement, 'waitCursor');
+    fetchFile('Pages/' + url + '.md', function(contentMd) {
+      removeClass(htmlElement, 'waitCursor');
+      contentElement.innerHTML = markdown.toHTML(contentMd);
+    }, function() {
+      var notFoundPage = '<h1>Page non trouvée</h1><a href="#">Retour à l\'accueil</a>';
+      contentElement.innerHTML = notFoundPage;
+    });
+  }
+
+  function addClass(element, myClass) {
+    element.className = element.className + ' waitCursor';
+  }
+
+  function removeClass(element, myClass) {
+    element.className = element.className.replace(new RegExp('(?:^|\\s)' + myClass + '(?!\\S)') , '');
+  }
+
   function fetchFile(url, successHandler, errorHandler) {
     var xhr = typeof XMLHttpRequest != 'undefined'
       ? new XMLHttpRequest()
@@ -26,21 +51,4 @@
     }
   };
 
-  function router() {
-    var url = location.hash.slice(2) || 'presentation';
-    var contentElement = document.getElementById('content');
-    contentElement.style.height = contentElement.offsetHeight + 'px';
-    contentElement.innerHTML = '';
-    fetchFile('Pages/' + url + '.md', function(contentMd) {
-      contentElement.style.height = 'auto';
-      contentElement.innerHTML = markdown.toHTML(contentMd);
-    }, function() {
-      var notFoundPage = '<h1>Page non trouvée</h1><a href="#">Retour à l\'accueil</a>';
-      contentElement.innerHTML = notFoundPage;
-    });
-  }
-
-  this.addEventListener('hashchange', router);
-  this.addEventListener('load', router);
-
 })();
diff --git a/style.css b/style.css
index fd45771..5f14e85 100644
--- a/style.css
+++ b/style.css
@@ -127,3 +127,7 @@ strong {
   text-align: center;
   color: #555555;
 }
+
+.waitCursor * {
+  cursor: wait !important;
+}