💄 Loading screen shows message on error

public/index.html

@@ -10,6 +10,7 @@
   <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" />
+  <link rel="stylesheet" type="text/css" href="loading-screen.css" />
   <!-- Default Page Title -->
   <title>Dashy</title>
 </head>
@@ -18,46 +19,32 @@
   <!-- 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 class="loading-placeholder" id="loader">
+      <h1>Dashy</h1>
+      <p class="loading">Loading...</p>
+      <!-- Error message, only visible if app not mounted within 5 secs -->
+      <div class="catastrophic-error" id="err-wrap" style="display:none;">
+        <p class="err-l1">It looks like something's gone wrong...</p>
+        <p class="err-l2">
+          Check the browser console, and 
+          <a href="https://github.com/Lissy93/dashy/blob/master/.github/SUPPORT.md">raise a ticket</a>
+          if you need additional support
+        </p>
+      </div>
+    </div>
   </div>
   <!-- Devices without JS enabled -->
   <noscript>
     <strong>Sorry, JavaScript needs to be enabled to run Dashy 😥</strong>
   </noscript>
-  <!-- Styles for loading screen -->
+  
-  <style type="text/css">
+  <!-- Show error message if app not mounted within reasonable time frame -->
-    body { margin: 0; }
+  <script>
-    #app .loading-placeholder {
+    setTimeout(() => {
-      position: absolute;
+      const loaderElem = document.getElementById('loader');
-      margin: 0;
+      if (loaderElem) loaderElem.classList.add('still-not-loaded');
-      padding: 0;
+      console.log('Will display error message');
-      width: 100%;
+    }, 7500);
-      height: 100%;
+  </script>
-      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;
-    }
-    @media (max-width: 780px) {
-      .loading-placeholder h1 { font-size: 12vh !important; }
-    }
-    #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>

public/loading-screen.css

@@ -0,0 +1,56 @@
+/* Styles applied to index.html for the loading screen, prior to the app being injected */
+/* Dashy - Licensed under MIT, (C) Alicia Sykes 2022 */
+
+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.loading {
+  font-size: 2rem;
+  font-family: monospace;
+  cursor: progress;
+  color: #0c0c0c;
+  text-shadow: 0 1px 1px #090909, 0 0 0 #000, 0 1px 1px #000000;
+}
+#app .loading-placeholder .catastrophic-error p {
+  color: #e11a4bfc;
+  margin: 0.5rem 0;
+  font-weight: bold;
+  font-size: 4vh;
+  text-align: center;
+  font-family: monospace;
+  text-shadow: 1px 2px 1px #090909, 0 0 0 #000, 0 1px 1px #000000
+}
+#app .loading-placeholder .catastrophic-error p.err-l2 {
+  font-size: 2vh;
+  font-weight: normal;
+}
+#app .loading-placeholder .catastrophic-error p.err-l2 a {
+  color: #e11a4bfc;
+}
+#app .loading-placeholder.still-not-loaded { cursor: default; }
+#app .loading-placeholder.still-not-loaded p.loading { display: none; }
+#app .loading-placeholder.still-not-loaded .catastrophic-error { display: block !important; }
+@media (max-width: 780px) {
+  .loading-placeholder h1 { font-size: 12vh !important; }
+  #app .loading-placeholder .catastrophic-error p { font-size: 2.5vh !important; }
+  #app .loading-placeholder .catastrophic-error p.err-l2 { font-size: 1.2vh !important; }
+}
+::selection { background-color: #db78fc; color: #121212; }