From be8630a9aa78de44505cab300461558ca72a1f41 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 27 Aug 2021 22:56:46 +0100
Subject: [PATCH] :sparkles: Show loading status in init page

---
 public/default.html | 207 ++++++++++++++++++++++++++++++++++++--------
 1 file changed, 172 insertions(+), 35 deletions(-)
diff --git a/public/default.html b/public/default.html
index b42dba7a..aaedff4f 100644
--- a/public/default.html
+++ b/public/default.html
@@ -1,6 +1,7 @@
 <!doctype html>
+<!-- Dashy: Licensed under MIT, (C) 2021 Alicia Sykes <https://aliciasykes.com> -->
+<!-- This is the default page, displayed while the app is still building -->
 <html>
-
 <head>
   <title>Dashy</title>
   <meta name="description" content="Welcome to Dashy">
@@ -12,6 +13,7 @@
 </head>
 
 <body>
+  <!-- Dashy Title Wavey Text -->
   <svg viewbox="0 0 100 20">
     <defs>
       <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
@@ -29,9 +31,16 @@
     <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)" fill-opacity="0.8">Dashy</text>
     <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#gradient)" fill-opacity="0.5">Dashy</text>
   </svg>
+
+  <!-- Progress Bar -->
+  <div class="progress-outer" id="bar-outer">
+    <div class="progress-inner" id="bar"></div>
+  </div>
+
+  <!-- Status label, with animated dots -->
   <div>
-    <h2>Initializing</h2>
-    <span class="dots-cont">
+    <h2 id="status-text">Initializing</h2>
+    <span id="dots" class="dots-cont">
       <span class="dot dot-1"></span>
       <span class="dot dot-2"></span>
       <span class="dot dot-3"></span>
@@ -39,7 +48,10 @@
     </span>
   </div>
 
+  <p class="time-note" id="note">This may take a minute or two</p>
+
   <style lang="css">
+    /* Page Layout Styles */
     body,
     html {
       margin: 0;
@@ -68,6 +80,7 @@
       display: inline;
     }
 
+    /* Animated Dots */
     .dots-cont {
       display: inline;
     }
@@ -84,44 +97,168 @@
       position: relative;
       animation: jump 1s infinite;
     }
-
-    .dots-cont .dot-1 {
-      -webkit-animation-delay: 100ms;
-      animation-delay: 100ms;
-    }
-
-    .dots-cont .dot-2 {
-      -webkit-animation-delay: 200ms;
-      animation-delay: 200ms;
-    }
-
-    .dots-cont .dot-3 {
-      -webkit-animation-delay: 300ms;
-      animation-delay: 300ms;
-    }
-
-    .dots-cont .dot-4 {
-      -webkit-animation-delay: 400ms;
-      animation-delay: 400ms;
-    }
+    .dots-cont .dot-1 { -webkit-animation-delay: 100ms; animation-delay: 100ms; }
+    .dots-cont .dot-2 { -webkit-animation-delay: 200ms; animation-delay: 200ms; }
+    .dots-cont .dot-3 { -webkit-animation-delay: 300ms; animation-delay: 300ms; }
+    .dots-cont .dot-4 { -webkit-animation-delay: 400ms; animation-delay: 400ms; }
 
     @keyframes jump {
-      0% {
-        bottom: 0px;
-      }
-
-      20% {
-        bottom: 5px;
-      }
-
-      40% {
-        bottom: 0px;
-      }
+      0% { bottom: 0px; }
+      20% { bottom: 5px; }
+      40% { bottom: 0px; }
     }
+
+    /* Little note */
+    p.time-note, p.time-note a {
+      font-size: 1rem;
+      color: #808080a6;
+      font-family: Tahoma, 'Trebuchet MS', sans-serif;
+    }
+
+    /* Progress Bar */
+    .progress-outer {
+      position: relative;
+      margin: 1rem;
+      height: 0.5rem;
+      width: 20rem;
+      border: 1px solid #fff;
+      border-radius: 6px;
+    }
+
+    .progress-outer .progress-inner {
+      position: absolute;
+      background-color: #fff;
+      width: 0px;
+      height: 0.5rem;
+      border-radius: 15px;
+    }
+    #bar.stage-0 {  animation: progress-0 8s infinite linear; }
+    #bar.stage-1 {  animation: progress-1 8s infinite linear; }
+    #bar.stage-2 {  animation: progress-2 8s infinite linear; }
+    #bar.stage-3 {  animation: progress-3 8s infinite linear; }
+    #bar.stage-4 {  animation: progress-4 8s infinite linear; }
+    #bar.stage-5 {  animation: progress-5 8s infinite linear; }
+    #bar.stage-6 {  animation: progress-6 8s infinite linear; }
+    #bar.stage-7 {  animation: progress-7 8s infinite linear; }
+    #bar.stage-8 {  animation: progress-8 8s infinite linear; }
+
+    @keyframes progress {
+      0% { width: 0%; }
+      25% { width: 50%; }
+      50% { width: 75%; }
+      75% { width: 85%; }
+      100% { width: 100%; }
+    }
+    @keyframes progress-0 {
+      0% { width: 0%; }
+      50% { width: 20%; }
+      100% { width: 30%; }
+    }
+    @keyframes progress-1 {
+      0% { width: 30%; }
+      50% { width: 42%; }
+      100% { width: 50%; }
+    }
+    @keyframes progress-2 {
+      0% { width: 50%; }
+      50% { width: 60%; }
+      100% { width: 65%; }
+    }
+    @keyframes progress-3 {
+      0% { width: 65%; }
+      100% { width: 75%; }
+    }
+    @keyframes progress-4 {
+      0% { width: 75%; }
+      100% { width: 85%; }
+    }
+    @keyframes progress-5 {
+      0% { width: 85%; }
+      100% { width: 90%; }
+    }
+    @keyframes progress-6 {
+      0% { width: 90%; }
+      100% { width: 94%; }
+    }
+    @keyframes progress-7 {
+      0% { width: 94%; }
+      50% { width: 96%; }
+      75% { width: 90%; }
+      100% { width: 96%; }
+    }
+    @keyframes progress-8 {
+      0% { width: 95%; }
+      50% { width: 97%; }
+      75% { width: 94%; }
+      100% { width: 98%; }
+    }
+
+    .hide { display: none; }
   </style>
 
   <script>
-    setTimeout(() => { location.reload(); }, 10000);
+    const refreshRate = 8000;
+    // Refresh at interval
+    setTimeout(() => { location.reload(); }, refreshRate);
+
+     // Get current stage
+     let initStage = parseInt(sessionStorage.getItem('initStage') || 0);
+
+    // Check if stage in session storage is old, and if so, reset it
+    const now = Math.round(Date.now()/1000);
+    const buildStarted = sessionStorage.getItem('buildStarted');
+    if (!buildStarted) { // First time build
+      sessionStorage.setItem('buildStarted', now);
+    } else if ((now - parseInt(buildStarted)) > 600) {
+      initStage = 0;
+      sessionStorage.setItem('buildStarted', now);
+    }
+
+    // Grab elements from page
+    const statusTextElem = document.getElementById('status-text');
+    const progressBarElem = document.getElementById('bar');
+    const progressOuterElem = document.getElementById('bar-outer');
+    const loadingDotsElem = document.getElementById('dots');
+    const noteElem = document.getElementById('note');
+
+    // Based on stage, modify element content/ styles
+    if (initStage === 0) {
+      statusTextElem.innerHTML = 'Initializing'
+      progressBarElem.classList.add('stage-0');
+    } else if (initStage === 1) {
+      statusTextElem.innerHTML = 'Running Checks'
+      progressBarElem.classList.add('stage-1');
+    }  else if (initStage === 2) {
+      statusTextElem.innerHTML = 'Building'
+      progressBarElem.classList.add('stage-2');
+    }  else if (initStage === 3) {
+      statusTextElem.innerHTML = 'Building'
+      progressBarElem.classList.add('stage-3');
+    }  else if (initStage === 4) {
+      statusTextElem.innerHTML = 'Finishing Off'
+      progressBarElem.classList.add('stage-4');
+    }  else if (initStage === 5) {
+      statusTextElem.innerHTML = 'Almost Done'
+      progressBarElem.classList.add('stage-5');
+    }  else if (initStage === 6) {
+      statusTextElem.innerHTML = 'Not Long Left'
+      progressBarElem.classList.add('stage-6');
+    }  else if (initStage === 7) {
+      statusTextElem.innerHTML = 'Taking Longer than Expected'
+      progressBarElem.classList.add('stage-7');
+      noteElem.innerHTML = 'See the console for more info';
+    }  else if (initStage >= 8) {
+      const docsLink = '<a href="https://github.com/Lissy93/dashy/tree/master/docs#readme">Documentation</a>';
+      statusTextElem.innerHTML = 'Possible Error, Check Logs'
+      noteElem.innerHTML = 'For troubleshooting, please see the ' + docsLink;
+      progressOuterElem.classList.add('hide');
+      loadingDotsElem.classList.add('hide');
+    } else {
+      statusTextElem.innerHTML = 'Building App'
+      progressOuterElem.classList.add('hide')
+    }
+    // Iterate the stage number
+    sessionStorage.setItem('initStage', initStage + 1)
   </script>
 </body>
 
