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

@@ -18,157 +18,161 @@ import Totp from "@/components/setupComponent/totp.vue";
 import Share from "@/views/share.vue";
 
 const checkAuth = async () => {
-  let result = false
+	let result = false
-  await fetchGet("/api/validateAuthentication", {}, (res) => {
+	await fetchGet("/api/validateAuthentication", {}, (res) => {
-    result = res.status
+		result = res.status
-  });
+	});
-  return result;
+	return result;
 }
 
 const router = createRouter({
-  history: createWebHashHistory(),
+	history: createWebHashHistory(),
-  scrollBehavior(){
+	scrollBehavior(){
-    if (document.querySelector("main") !== null){
+		if (document.querySelector("main") !== null){
-      document.querySelector("main").scrollTo({
+			document.querySelector("main").scrollTo({
-        top: 0
+				top: 0
-      })
+			})
-    }
+		}
-    
+	},
-    
+	routes: [
-  },
+		{
-  routes: [
+			name: "Index",
-    {
+			path: '/',
-      name: "Index",
+			component: Index,
-      path: '/',
+			meta: {
-      component: Index,
+				requiresAuth: true,
-      meta: {
+			},
-        requiresAuth: true,
+			children: [
-      },
+				{
-      children: [
+					name: "Configuration List",
-        {
+					path: '',
-          name: "Configuration List",
+					component: ConfigurationList,
-          path: '',
+					meta: {
-          component: ConfigurationList,
+						title: "WireGuard Configurations"
-          meta: {
+					}
-            title: "WireGuard Configurations"
+				},
-          }
+				{
-        },
+					name: "Settings",
-        {
+					path: '/settings',
-          name: "Settings",
+					component: Settings,
-          path: '/settings',
+					meta: {
-          component: Settings,
+						title: "Settings"
-          meta: {
+					}
-            title: "Settings"
+				},
-          }
+				{
-        },
+					path: '/ping',
-        {
+					name: "Ping",
-          path: '/ping',
+					component: Ping,
-          name: "Ping",
+				},
-          component: Ping,
+				{
-        },
+					path: '/traceroute',
-        {
+					name: "Traceroute",
-          path: '/traceroute',
+					component: Traceroute,
-          name: "Traceroute",
+				},
-          component: Traceroute,
+				{
-        },
+					name: "New Configuration",
-        {
+					path: '/new_configuration',
-          name: "New Configuration",
+					component: NewConfiguration,
-          path: '/new_configuration',
+					meta: {
-          component: NewConfiguration,
+						title: "New Configuration"
-          meta: {
+					}
-            title: "New Configuration"
+				},
-          }
+				{
-        },
+					name: "Configuration",
-        {
+					path: '/configuration/:id',
-          name: "Configuration",
+					component: Configuration,
-          path: '/configuration/:id',
+					meta: {
-          component: Configuration,
+						title: "Configuration"
-          meta: {
+					},
-            title: "Configuration"
+					children: [
-          },
+						{
-          children: [
+							name: "Peers List",
-            {
+							path: 'peers',
-              name: "Peers List",
+							component: PeerList
-              path: 'peers',
+						},
-              component: PeerList
+						{
-            },
+							name: "Peers Create",
-            {
+							path: 'create',
-              name: "Peers Create",
+							component: PeerCreate
-              path: 'create',
+						},
-              component: PeerCreate
+					]
-            },
+				},
-          ]
+
-        },
+			]
-        
+		},
-      ]
+		{
-    },
+			path: '/signin', component: Signin,
-    {
+			meta: {
-      path: '/signin', component: Signin,
+				title: "Sign In"
-      meta: {
+			}
-        title: "Sign In"
+		},
-      }
+		{
-    },
+			path: '/welcome', component: Setup,
-    {
+			meta: {
-      path: '/welcome', component: Setup,
+				requiresAuth: true,
-      meta: {
+				title: "Welcome to WGDashboard"
-        requiresAuth: true,
+			},
-        title: "Welcome to WGDashboard"
+		},
-      },
+		{
-    },
+			path: '/2FASetup', component: Totp,
-    {
+			meta: {
-      path: '/2FASetup', component: Totp,
+				requiresAuth: true,
-      meta: {
+				title: "Multi-Factor Authentication Setup"
-        requiresAuth: true,
+			},
-        title: "Multi-Factor Authentication Setup"
+		},
-      },
+		{
-    },
+			path: '/share', component: Share,
-    {
+			meta: {
-      path: '/share', component: Share,
+				title: "Share"
-      meta: {
+			}
-        title: "Share"
+		}
-      }
+	]
-    }
-  ]
 });
 
 router.beforeEach(async (to, from, next) => {
-  const wireguardConfigurationsStore = WireguardConfigurationsStore();
+	const wireguardConfigurationsStore = WireguardConfigurationsStore();
-  const dashboardConfigurationStore = DashboardConfigurationStore();
+	const dashboardConfigurationStore = DashboardConfigurationStore();
-  
+
-  if (to.meta.title){
+	if (to.meta.title){
-    if (to.params.id){
+		if (to.params.id){
-      document.title = to.params.id + " | WGDashboard";
+			document.title = to.params.id + " | WGDashboard";
-    }else{
+		}else{
-      document.title = to.meta.title + " | WGDashboard";
+			document.title = to.meta.title + " | WGDashboard";
-    }
+		}
-  }else{
+	}else{
-    document.title = "WGDashboard"
+		document.title = "WGDashboard"
-  }
+	}
-  dashboardConfigurationStore.ShowNavBar = false;
+	dashboardConfigurationStore.ShowNavBar = false;
-  
+	document.querySelector(".loadingBar").classList.remove("loadingDone")
-  if (to.meta.requiresAuth){
+	document.querySelector(".loadingBar").classList.add("loading")
-    if (!dashboardConfigurationStore.getActiveCrossServer()){
+	if (to.meta.requiresAuth){
-      if (cookie.getCookie("authToken") && await checkAuth()){
+		if (!dashboardConfigurationStore.getActiveCrossServer()){
-        await dashboardConfigurationStore.getConfiguration()
+			if (cookie.getCookie("authToken") && await checkAuth()){
-        if (!wireguardConfigurationsStore.Configurations && to.name !== "Configuration List"){
+				await dashboardConfigurationStore.getConfiguration()
-          await wireguardConfigurationsStore.getConfigurations();
+				if (!wireguardConfigurationsStore.Configurations && to.name !== "Configuration List"){
-        }
+					await wireguardConfigurationsStore.getConfigurations();
-        dashboardConfigurationStore.Redirect = undefined;
+				}
-        next()
+				dashboardConfigurationStore.Redirect = undefined;
-      }else{
+				next()
-        dashboardConfigurationStore.Redirect = to;
+			}else{
-        next("/signin")
+				dashboardConfigurationStore.Redirect = to;
-        dashboardConfigurationStore.newMessage("WGDashboard", "Sign in session ended, please sign in again", "warning")
+				next("/signin")
-      }
+				dashboardConfigurationStore.newMessage("WGDashboard", "Sign in session ended, please sign in again", "warning")
-    }else{
+			}
-      await dashboardConfigurationStore.getConfiguration()
+		}else{
-      if (!wireguardConfigurationsStore.Configurations && to.name !== "Configuration List"){
+			await dashboardConfigurationStore.getConfiguration()
-        await wireguardConfigurationsStore.getConfigurations();
+			if (!wireguardConfigurationsStore.Configurations && to.name !== "Configuration List"){
-      }
+				await wireguardConfigurationsStore.getConfigurations();
-      next()
+			}
-    }
+			next()
-  }else {
+		}
-    next();
+	}else {
-  }
+		next();
+	}
 });
+
+router.afterEach(() => {
+	document.querySelector(".loadingBar").classList.remove("loading")
+	document.querySelector(".loadingBar").classList.add("loadingDone")
+})
 export default router

src/static/css/dashboard.css

@@ -1232,4 +1232,37 @@ pre.index-alert {
     100%{
         --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%;
+    }
 }