Merge pull request #568 from Pax1601/loading-screen

Loading screen

client/public/stylesheets/style/style.css

@@ -876,6 +876,43 @@ nav.ol-panel> :last-child {
     z-index: 99999;
 }
 
+#loading-screen {
+    display: flex;
+    background-image: linear-gradient(var(--background-steel), var(--background-grey));
+    height: 100%;
+    left: 0px;
+    position: fixed;
+    top: 0px;
+    width: 100%;
+    z-index: 999999;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    row-gap: 20px;
+}
+
+#loading-screen img {
+    height: 300px;
+    width: 300px;
+}
+
+#loading-screen div {
+    color: white;
+    font-size: 18px;
+    animation: blinker 3s linear infinite;
+}
+
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}
+
+.fade-out {
+    opacity: 0%;
+    transition: opacity 1s;
+}
+
 #authentication-form {
     align-items: end;
     column-gap: 10px;

client/src/olympusapp.ts

@@ -232,11 +232,21 @@ export class OlympusApp {
         this.#setupEvents();
 
         /* Set the splash background image to a random image */
-        var splashScreen = document.getElementById("splash-screen");
-        if (splashScreen) {
-            let i = Math.round(Math.random() * 7 + 1);
+        let splashScreen = document.getElementById("splash-screen") as HTMLElement;
+        let i = Math.round(Math.random() * 7 + 1);
+
+        new Promise((resolve, reject) => {
+            const image = new Image();
+            image.addEventListener('load', resolve);
+            image.addEventListener('error', resolve);
+            image.src = `/resources/theme/images/splash/${i}.jpg`;
+        }).then(() => {
             splashScreen.style.backgroundImage = `url('/resources/theme/images/splash/${i}.jpg')`;
-        }
+            let loadingScreen = document.getElementById("loading-screen") as HTMLElement;
+            loadingScreen.classList.add("fade-out");
+            window.setInterval(() => { loadingScreen.classList.add("hide"); }, 1000);
+            
+        })            
     }
 
     #setupEvents() {

client/views/index.ejs

@@ -50,6 +50,12 @@
 
   <!-- Grayout effect of the background when login prompt is visible -->
   <div id="gray-out"></div> 
+
+  <!-- Loading screen -->
+  <div id="loading-screen">
+    <img src="images/olympus-500x500.png">
+    <div>Loading DCS Olympus...</div>
+  </div>
   
   <script src="javascripts/bundle.js"></script>
 </body>