From 1cfe6f558325a692c02a5cd9fd2b1b2f57a95395 Mon Sep 17 00:00:00 2001
From: Pax1601 <d.passoni92@gmail.com>
Date: Wed, 22 Nov 2023 11:32:13 +0100
Subject: [PATCH] Added simple loading screen

---
 client/public/stylesheets/style/style.css | 37 +++++++++++++++++++++++
 client/src/olympusapp.ts                  | 18 ++++++++---
 client/views/index.ejs                    |  6 ++++
 3 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/client/public/stylesheets/style/style.css b/client/public/stylesheets/style/style.css
index 53d8768c..d0f5e530 100644
--- a/client/public/stylesheets/style/style.css
+++ b/client/public/stylesheets/style/style.css
@@ -823,6 +823,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;
diff --git a/client/src/olympusapp.ts b/client/src/olympusapp.ts
index 0ab26b3a..71251942 100644
--- a/client/src/olympusapp.ts
+++ b/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() {
diff --git a/client/views/index.ejs b/client/views/index.ejs
index 6ecfaba2..6856ec4e 100644
--- a/client/views/index.ejs
+++ b/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>