Merge branch 'feature-loading-messages'

n1474335 · n1474335 · commit a6317212d90f · 2017-05-19T16:25:30.000Z
diff --git a/src/web/App.js b/src/web/App.js
@@ -70,6 +70,9 @@ App.prototype.loaded = function() {
         document.getElementById("loader-wrapper").remove();
         document.body.classList.remove("loaded");
     }, 1000);
+
+    // Clear the loading message interval
+    clearInterval(window.loadingMsgInt);
 };
 
 
diff --git a/src/web/html/index.html b/src/web/html/index.html
@@ -34,12 +34,37 @@
         <script type="application/javascript">
             // Load theme before the preloader is shown
             document.querySelector(":root").className = JSON.parse(localStorage.getItem("options")).theme;
+
+            // Cycle loading messages
+            const loadingMsgs = [
+                "Proving P = NP...",
+                "Computing 6 x 9...",
+                "Mining bitcoin...",
+                "Dividing by 0...",
+                "Initialising Skynet...",
+                "[REDACTED]",
+                "Downloading more RAM...",
+                "Loading more loading messages...",
+                "Ordering 1s and 0s...",
+                "Navigating neural network...",
+                "Importing machine learning..."
+            ];
+            function changeLoadingMsg() {
+                try {
+                    const el = document.getElementById("preloader-msg");
+                    el.className = "loading"; // Causes CSS transition on first message
+                    el.innerHTML = loadingMsgs[Math.floor(Math.random()*loadingMsgs.length)];
+                } catch (err) {}
+            }
+            changeLoadingMsg();
+            window.loadingMsgsInt = setInterval(changeLoadingMsg, (Math.random()*500) + 500);
         </script>
     </head>
     <body>
         <!-- Preloader overlay -->
         <div id="loader-wrapper">
             <div id="preloader"></div>
+            <div id="preloader-msg"></div>
         </div>
         <!-- End preloader overlay -->
         <span id="edit-favourites" class="btn btn-default btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
diff --git a/src/web/stylesheets/preloader.css b/src/web/stylesheets/preloader.css
@@ -55,9 +55,26 @@
     animation: spin 1.5s linear infinite;
 }
 
+#preloader-msg {
+    display: block;
+    position: relative;
+    width: 300px;
+    left: calc(50% - 150px);
+    top: calc(50% + 50px);
+    text-align: center;
+    margin-top: 50px;
+    opacity: 0;
+}
+
+#preloader-msg.loading {
+    opacity: 1;
+    transition: all 0.1s ease-in;
+}
+
 
 /* Loaded */
-.loaded #preloader {
+.loaded #preloader,
+.loaded #preloader-msg {
     opacity: 0;
     transition: all 0.3s ease-out;
 }
