receiver: use pure CSS animation for default loading animation

SVG SMIL is going to be deprecated and as is, we cannot just use CSS to
style it. Moreover, this move enables us to not enable the animation on
slow browsers.

app/scripts/receiver.js

@@ -5,9 +5,7 @@
 (function(window, undefined) {
   'use strict';
 
-  var socketio = require('./receiver/socketio'),
-      errors = require('./receiver/errors'),
-      supervisor = require('./receiver/supervisor'),
+  var errors = require('./receiver/errors'),
       console = require('./receiver/console'),
       benchmark = require('./receiver/benchmark'),
       document = window.document;
@@ -18,10 +16,10 @@
   document.addEventListener('DOMContentLoaded', function() {
     benchmark.done(function() {
       document.querySelector('.show').classList.add('loading');
-      supervisor.ready();
+      // supervisor.ready();
       // OK, ready, connect to socket.io
       console.log('[Dashkiosk] dashkiosk ready, connect to socket.io server');
-      socketio.connect();
+      // socketio.connect();
     });
   });
 

app/styles/receiver/loading.less

@@ -22,27 +22,38 @@
         background-repeat: no-repeat;
         background-size: contain;
     }
-    .branding-exoscale, .branding-default {
+    .branding-exoscale {
         width: 50%;
         height: 60%;
         @media all and (orientation: landscape) {
             width: 60%;
             height: 50%;
         }
     }
+    .branding-default {
+        margin: 25% auto;
+        width: 10%;
+        height: auto;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: white;
+        background-image: none;
+        border-radius: 100%;
+        &:before{
+	    content: "";
+	    display: block;
+	    padding-top: 100%;
+        }
+    }
 
     cursor: wait;
 
     transform: translateX(-150%);
     transform: translate3d(-150%, 0, 0);
     .dk-fast-browser & {
         transition: transform 0.5s;
-        & .branding-default {
-            display: block;
-        }
-    }
-    .branding-default {
-        display: none;
     }
 
     &.show {
@@ -52,7 +63,7 @@
             animation: spinning 10s infinite linear;
         }
         .dk-fast-browser & .branding-default {
-            animation: none 0s;
+            animation: scaleout 1.0s infinite ease-in-out;
         }
         .dk-fast-browser & .branding-exoscale {
             animation: shaking 2s infinite linear;
@@ -87,3 +98,12 @@
     55% { transform: translate(1px, -2px) rotate(-1deg); }
     60% { transform: translate(0, 0) rotate(0deg); }
 }
+
+@keyframes scaleout {
+    0% { 
+        transform: scale(0);
+    } 100% {
+        transform: scale(1);
+        opacity: 0;
+    }
+}