From 7b6b7bc58d04db7360213be2b280c1bc2f8c0e6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= <gael.metais@gmail.com>
Date: Fri, 5 Sep 2014 14:32:49 +0200
Subject: [PATCH] Add a spinner on the loading page

---
 app/node_views/launchTest.html   | 12 ++++++++++++
 app/public/styles/launchTest.css | 14 ++++++++++++++
 app/public/styles/less/main.less |  3 +++
 app/public/styles/main.css       |  3 +++
 4 files changed, 32 insertions(+)

diff --git a/app/node_views/launchTest.html b/app/node_views/launchTest.html
index b3f0cd7..494a326 100644
--- a/app/node_views/launchTest.html
+++ b/app/node_views/launchTest.html
@@ -33,20 +33,32 @@
                 statusElement.innerHTML = 'Waiting behind ' + (position) + ' other tests';
             }
             sendPositionInQueueToGA(position);
+
+            // Rotate the spinner
+            document.body.className = 'waiting';
         });
 
         socket.on('complete', function() {
             statusElement.innerHTML = 'Test complete';
             window.location.replace('/results/' + testId);
+
+            // Stop the spinner
+            document.body.className = '';
         });
 
         socket.on('failed', function() {
             statusElement.innerHTML = 'Test failed';
             window.location.replace('/results/' + testId);
+
+            // Stop the spinner
+            document.body.className = '';
         });
 
         socket.on('404', function() {
             statusElement.innerHTML = 'Test not found';
+
+            // Stop the spinner
+            document.body.className = '';
         });
 
         askStatus();
diff --git a/app/public/styles/launchTest.css b/app/public/styles/launchTest.css
index 1359e9e..052e038 100644
--- a/app/public/styles/launchTest.css
+++ b/app/public/styles/launchTest.css
@@ -1,4 +1,18 @@
 #status {
     margin-top: 2em;
     font-size: 2.5em;
+}
+
+@-webkit-keyframes rotating {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(360deg); }
+}
+@keyframes rotating {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.waiting .icon-lab {
+    -webkit-animation: rotating 3s linear 0s infinite;
+    animation: rotating 3s linear 0s infinite;
 }
\ No newline at end of file
diff --git a/app/public/styles/less/main.less b/app/public/styles/less/main.less
index 82b9d99..8de7a3f 100644
--- a/app/public/styles/less/main.less
+++ b/app/public/styles/less/main.less
@@ -26,6 +26,9 @@ input[type=submit] {
 }
 
 h1 span {
+    display: inline-block;
+    height: 1em;
+    width: 1em;
     color: #ffa319;
 }
 
diff --git a/app/public/styles/main.css b/app/public/styles/main.css
index 7cc5139..c387576 100644
--- a/app/public/styles/main.css
+++ b/app/public/styles/main.css
@@ -26,6 +26,9 @@ input[type=submit] {
   cursor: pointer;
 }
 h1 span {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
   color: #ffa319;
 }
 .footer {