Added loading bar between each routes

src/static/app/src/App.vue

@@ -24,6 +24,7 @@ const getActiveCrossServer = computed(() => {
 </script>
 
 <template>
+	<div style="z-index: 9999; height: 5px" class="position-absolute loadingBar top-0 start-0"></div>
 	<nav class="navbar bg-dark sticky-top" data-bs-theme="dark">
 		<div class="container-fluid d-flex text-body align-items-center">
 			<span class="navbar-brand mb-0 h1">WGDashboard</span>

src/static/app/src/router/index.js

@@ -33,8 +33,6 @@ const router = createRouter({
 				top: 0
 			})
 		}
-    
-    
 	},
 	routes: [
 		{
@@ -145,7 +143,8 @@ router.beforeEach(async (to, from, next) => {
 		document.title = "WGDashboard"
 	}
 	dashboardConfigurationStore.ShowNavBar = false;
-  
+	document.querySelector(".loadingBar").classList.remove("loadingDone")
+	document.querySelector(".loadingBar").classList.add("loading")
 	if (to.meta.requiresAuth){
 		if (!dashboardConfigurationStore.getActiveCrossServer()){
 			if (cookie.getCookie("authToken") && await checkAuth()){
@@ -171,4 +170,9 @@ router.beforeEach(async (to, from, next) => {
 		next();
 	}
 });
+
+router.afterEach(() => {
+	document.querySelector(".loadingBar").classList.remove("loading")
+	document.querySelector(".loadingBar").classList.add("loadingDone")
+})
 export default router

src/static/css/dashboard.css

@@ -1233,3 +1233,36 @@ pre.index-alert {
         --bgdegree: 594deg;
     }
 }
+
+.loadingBar{
+    background: linear-gradient(var(--degree), var(--brandColor1) var(--distance2), var(--brandColor2) 100%);
+}
+
+.loadingBar.loading{
+    animation: loading cubic-bezier(0.82, 0.58, 0.17, 1) 0.2s forwards;
+}
+.loadingBar.loadingDone{
+    animation: loadingDone cubic-bezier(0.82, 0.58, 0.17, 1) 0.5s forwards;
+}
+
+@keyframes loading {
+    from{
+        opacity: 0;
+        width: 0%;
+    }
+    to{
+        opacity: 1;
+        width: 20%;
+    }
+}
+
+@keyframes loadingDone {
+    from{
+        opacity: 1;
+        width: 20%;
+    }
+    to{
+        opacity: 0;
+        width: 100%;
+    }
+}