Added the loader when navigating between pages.

902120c1 · Stefano Alberto Russo · 3b9f8748 · 902120c1 · 902120c1 · 902120c1
Commit 902120c1 authored 10 months ago by Stefano Alberto Russo
--- a/services/webapp/code/rosetta/core_app/static/css/loader.css
+++ b/services/webapp/code/rosetta/core_app/static/css/loader.css
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+#navigate-away-loader {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 2000;
+	align-items: center;
+	justify-content: center;
+	color: white;
+
+	transition: opacity 0.4s ease-in-out;
+
+	visibility: hidden;
+	pointer-events: none;
+	display: flex;
+
+	& > svg {
+		animation: spin 1.5s infinite linear;
+		opacity: 0.5;
+	}
+}
--- a/services/webapp/code/rosetta/core_app/static/js/loader.js
+++ b/services/webapp/code/rosetta/core_app/static/js/loader.js
+function showNavigationLoader() {
+	var navigationLoader = document.querySelector("#navigate-away-loader")
+	navigationLoader.style.visibility = "visible"
+	navigationLoader.style.opacity = 1
+	navigationLoader.style.pointerEvents = "all"
+
+	document.querySelector("#navigate-away-loader > svg").style.animation =
+		"spin 1.5s infinite linear"
+}
+
+function hideNavigationLoader() {
+	var navigationLoader = document.querySelector("#navigate-away-loader")
+	navigationLoader.style.visibility = "hidden"
+	navigationLoader.style.opacity = 0
+	navigationLoader.style.pointerEvents = "none"
+}
+
+window.addEventListener("beforeunload", function (e) {
+	showNavigationLoader()
+	return true
+})
+window.addEventListener("pageshow", function (e) {
+	hideNavigationLoader()
+})
--- a/services/webapp/code/rosetta/core_app/templates/header.html
+++ b/services/webapp/code/rosetta/core_app/templates/header.html
@@ -59,7 +59,18 @@
    <!-- Date time picker -->
    <script src="/static/js/bootstrap-datetimepicker-4.17.47.js"></script>

+    <!--  Loader -->
+    <link rel="stylesheet" href="/static/css/loader.css">
+    <script src="/static/js/loader.js"></script>
+
 </head>

 <body {{ body_args }}>
-
+    <div id="navigate-away-loader">
+        <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+            <path d="M21 3v5h-5" />
+            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+            <path d="M8 16H3v5" />
+        </svg>
+      </div>