From 6c0e81ae918f2f48549fda02ba4b5ac95fac1326 Mon Sep 17 00:00:00 2001
From: Rolux <rolux@Rolux.local>
Date: Fri, 8 Jan 2016 09:03:55 +0530
Subject: [PATCH] better pre-loading screen

---
 static/html/load.html | 119 +++++++++++++++++++++++++++++++-----------
 1 file changed, 89 insertions(+), 30 deletions(-)
diff --git a/static/html/load.html b/static/html/load.html
index a4f9a19..69b7b3a 100644
--- a/static/html/load.html
+++ b/static/html/load.html
@@ -5,41 +5,100 @@
     <title>Open Media Library</title>
     <link href="../../../oxjs/min/UI/css/UI.css" rel="stylesheet" type="text/css" />
     <style>
-        #loading {
-            text-align: center;
-            padding-top: 24px;
+        #logo {
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 96px;
+            width: 256px;
+            height: 256px;
+            margin: auto;
+            moz-user-select: none;
+            ms-user-select: none;
+            o-user-select: none;
+            webkit-user-select: none;
         }
-        #status {
+        #loadingIcon {
+            position: absolute;
+            left: 16px;
+            top: 256px;
+            right: 0;
+            bottom: 0;
+            width: 32px;
+            height: 32px;
+            margin: auto;
+            moz-user-select: none;
+            ms-user-select: none;
+            o-user-select: none;
+            webkit-user-select: none;
+        }
+        #error {
+            position: absolute;
+            left: 16px;
+            top: 256px;
+            right: 0;
+            bottom: 0;
+            width: 240px;
+            height: 32px;
+            margin: auto;
             padding-bottom: 16px;
+            text-align: center;
+            display: none;
         }
     </style>
-    <script>
-        function load() {
-            var port = document.location.hash.length
-                    ? document.location.hash.slice(1)
-                    : '9842',
-                base = '//127.0.0.1:' + port,
-                ws = new WebSocket('ws:' + base + '/ws');
-            ws.onopen = function(event) {
-                document.location.href = 'http:' + base;
-            };
-            ws.onerror = function(event) {
-                ws.close();
-            };
-            ws.onclose = function(event) {
-                setTimeout(load, 500);
-            };
-        };
-        load();
-        setTimeout(function() {
-            document.querySelector('#status').innerHTML = 'Failed to start Open Media Library';
-        }, 20000);
-    </script>
 </head>
 <body class="OxThemeOxlight">
-    <div id="loading">
-        <div id="status">Starting Open Media Library</div>
-        <img src="../png/oml.png">
-    </div>
+    <img id="logo" src="../png/oml.png" style="">
+    <img id="loadingIcon" src="../../../oxjs/min/UI/themes/oxlight/svg/symbolLoading.svg">
+    <div id="error">Failed to launch Open Media Library</div>
+    <script>
+        (function() {
+            var animationInterval;
+            function load() {
+                var port = document.location.hash.length
+                        ? document.location.hash.slice(1)
+                        : '9842',
+                    base = '//127.0.0.1:' + port,
+                    ws = new WebSocket('ws:' + base + '/ws');
+                ws.onopen = function(event) {
+                    document.location.href = 'http:' + base;
+                };
+                ws.onerror = function(event) {
+                    ws.close();
+                };
+                ws.onclose = function(event) {
+                    setTimeout(load, 500);
+                };
+            };
+            function startAnimation() {
+                var css, deg = 0,
+                    loadingIcon = document.getElementById('loadingIcon'),
+                    previousTime = +new Date();
+                animationInterval = setInterval(function() {
+                    var currentTime = +new Date(),
+                        delta = (currentTime - previousTime) / 1000;
+                    previousTime = currentTime;
+                    deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
+                    css = 'rotate(' + deg + 'deg)';
+                    loadingIcon.style.MozTransform = css;
+                    loadingIcon.style.MSTransform = css;
+                    loadingIcon.style.OTransform = css;
+                    loadingIcon.style.WebkitTransform = css;
+                    loadingIcon.style.transform = css;
+                }, 83);
+            }
+            function stopAnimation() {
+                clearInterval(animationInterval);
+            }
+            startAnimation();
+            load();
+            setTimeout(function() {
+                stopAnimation();
+                document.getElementById('loadingIcon').style.display = 'none';
+                document.getElementById('error').style.display = 'block';
+            }, 20000);
+        }());
+    </script>
 </body>
 </html>
