From 6a848133707ca06531c88577f64c262e4e63b342 Mon Sep 17 00:00:00 2001
From: Ryan <48137622+rstrom1763@users.noreply.github.com>
Date: Thu, 23 Nov 2023 21:39:20 -0800
Subject: [PATCH] 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.
---
api/static/css/home.css | 35 +++++++++++++++++++++++++++++++++++
api/static/html/home.html | 4 ++++
api/static/js/home.js | 10 +++++++++-
3 files changed, 48 insertions(+), 1 deletion(-)
diff --git a/api/static/css/home.css b/api/static/css/home.css
index 49e8299..66daa0e 100644
--- 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
index 8cd9354..ef6fd4f 100644
--- a/api/static/html/home.html
+++ b/api/static/html/home.html
@@ -7,6 +7,10 @@
+
+
{{range .}}
diff --git a/api/static/js/home.js b/api/static/js/home.js
index adaa862..1b89904 100644
--- 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("/")
-}
\ No newline at end of file
+}
+
+window.addEventListener("load", function () {
+
+ // Hide the loading screen once all images are loaded
+ const loadingScreen = document.getElementById("loading-screen");
+ loadingScreen.style.display = "none";
+
+});