From b00c9ad90297ff1bb2c69de664b50c824a0fdc50 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 19 Sep 2021 22:22:12 +0100
Subject: [PATCH] :sparkles: Show splash screen before app loaded

---
 public/index.html | 51 ++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 42 insertions(+), 9 deletions(-)
diff --git a/public/index.html b/public/index.html
index c02e9e4d..589395f5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,27 +1,60 @@
 <!DOCTYPE html>
-<!-- Do not modify this file directly -->
-
-<html lang="en">
-
+<html>
 <head>
+  <!-- Encoding and Viewport -->
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <!-- Favicon + App Icon -->
   <link rel="icon" type="image/png" sizes="64x64" href="<%= BASE_URL %>/web-icons/favicon-64x64.png">
   <link rel="icon" type="image/png" sizes="32x32" href="web-icons/favicon-32x32.png">
   <link rel="icon" href="/favicon.ico" />
   <link rel="icon" type="image/png" href="<%= BASE_URL %>favicon.ico" />
+  <!-- Default Page Title -->
   <title>Dashy</title>
 </head>
 
 <body>
+  <!-- built files will be auto injected -->
+  <div id="app">
+    <!-- Loading screen, will be replaced when app loaded -->
+    <div class="loading-placeholder" id="loader"><h1>Dashy</h1><p>Loading...</p></div>
+  </div>
   <!-- Devices without JS enabled -->
   <noscript>
-    <strong>Sorry, JavaScript is required to run this app 😥</strong>
+    <strong>Sorry, JavaScript needs to be enabled to run Dashy 😥</strong>
   </noscript>
-
-  <!-- built files will be auto injected -->
-  <div id="app"></div>
+  <!-- Styles for loading screen -->
+  <style type="text/css">
+    body { margin: 0; }
+    #app .loading-placeholder {
+      position: absolute;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      cursor: progress;
+      background: #121212;
+    }
+    #app .loading-placeholder h1 {
+      font-size: 20vh;
+      font-family: Tahoma, monospace;
+      cursor: progress;
+      color: #0c0c0c;
+      text-shadow: 0px 4px 4px #090909, 0 0 0 #000, 0px 2px 2px #000000;
+    }
+    #app .loading-placeholder p {
+      font-size: 2rem;
+      font-family: monospace;
+      cursor: progress;
+      color: #0c0c0c;
+      text-shadow: 0 1px 1px #090909, 0 0 0 #000, 0 1px 1px #000000;
+    }
+    ::selection { background-color: #db78fc; color: #121212; }
+  </style>
 </body>
-
 </html>
\ No newline at end of file
