Commit 902120c1 authored by Stefano Alberto Russo's avatar Stefano Alberto Russo
Browse files

Added the loader when navigating between pages.

parent 3b9f8748

services/webapp/code/rosetta/core_app/static/css/loader.css

0 → 100644
+29 −0
Original line number Diff line number Diff line 
@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;

	}

}

services/webapp/code/rosetta/core_app/static/js/loader.js

0 → 100644
+24 −0
Original line number Diff line number Diff line 
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()

})

services/webapp/code/rosetta/core_app/templates/header.html

+12 −1
Original line number Diff line number Diff line
@@ -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>