Added loading screen to home page

There is now is a loading page when navigating to the home page. Prior to this you would watch the thumbnails load which didn't feel very polished.
rstrom1763 · Nov 24, 2023 · 6a84813 · 6a84813
1 parent d462f61
commit 6a84813
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/api/static/css/home.css b/api/static/css/home.css
@@ -1,3 +1,38 @@
+/* Start of loading screen stuff */
+#loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(80, 80, 80);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.loader {
+    border: 6px solid #f3f3f3;
+    border-top: 6px solid #3498db;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* End of loading screen stuff */
+
 .navbar {
     z-index: 9999;
     overflow: hidden;

diff --git a/api/static/html/home.html b/api/static/html/home.html
@@ -7,6 +7,10 @@
 </head>
 <body>
 
+<div id="loading-screen">
+    <div class="loader"></div>
+</div>
+
 <div class="container">
 
     {{range .}}

diff --git a/api/static/js/home.js b/api/static/js/home.js
@@ -14,4 +14,12 @@ function goToShoot(passedDiv){
     console.log(url)
     window.location.href = url.join("/")
 
-}
+}
+
+window.addEventListener("load", function () {
+
+    // Hide the loading screen once all images are loaded
+    const loadingScreen = document.getElementById("loading-screen");
+    loadingScreen.style.display = "none";
+
+});