diff --git a/services/webapp/code/rosetta/core_app/static/css/loader.css b/services/webapp/code/rosetta/core_app/static/css/loader.css
new file mode 100644
index 0000000000000000000000000000000000000000..4cdbbe4daf0864ee8443869dc845319d95cad58d
--- /dev/null
+++ b/services/webapp/code/rosetta/core_app/static/css/loader.css
@@ -0,0 +1,29 @@
+@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;
+ }
+}
diff --git a/services/webapp/code/rosetta/core_app/static/js/loader.js b/services/webapp/code/rosetta/core_app/static/js/loader.js
new file mode 100644
index 0000000000000000000000000000000000000000..99f9b578bd7bd6a56d63a1c63243f3f2a79596a2
--- /dev/null
+++ b/services/webapp/code/rosetta/core_app/static/js/loader.js
@@ -0,0 +1,24 @@
+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()
+})
diff --git a/services/webapp/code/rosetta/core_app/templates/header.html b/services/webapp/code/rosetta/core_app/templates/header.html
index 7161aab7757de50c744d57753cd77823157b330d..13f525c8d2c91c21e4df5ca0e5f34c5d715e04e4 100644
--- 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>