feat: add NProgress bar (#67)

* feat: add n progress bar

* chore: bump version

.changes/n-progress.md

@@ -0,0 +1,5 @@
+---
+"algohub": patch:feat
+---
+
+Add `NProgress` loading bar to the whole frontend.

package.json

@@ -27,6 +27,7 @@
     "axios": "^1.7.7",
     "md-editor-v3": "^5.0.2",
     "monaco-editor": "^0.52.0",
+    "nprogress": "^0.2.0",
     "pinia": "^2.2.6",
     "pinia-plugin-persistedstate": "^4.1.3",
     "postcss": "^8.4.49",
@@ -43,6 +44,7 @@
     "@primevue/auto-import-resolver": "^4.2.2",
     "@tauri-apps/cli": "^2.1.0",
     "@types/node": "^22.9.0",
+    "@types/nprogress": "^0.2.3",
     "@types/path-browserify": "^1.0.3",
     "@vitejs/plugin-vue": "^5.2.0",
     "archons": "^0.2.5",

src/router.ts

@@ -3,6 +3,8 @@ import {
   createWebHashHistory,
   type RouteRecordRaw,
 } from "vue-router";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
 
 const views = import.meta.glob([
   "./views/**/*.vue",
@@ -27,7 +29,26 @@ const routes: RouteRecordRaw[] = Object.entries(views).map(
   }
 );
 
-export default createRouter({
+const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [...routes],
 });
+
+NProgress.configure({
+  easing: "ease",
+  speed: 500,
+  showSpinner: false,
+  trickleSpeed: 200,
+  minimum: 0.3,
+});
+
+router.beforeEach((_to, _from, next) => {
+  NProgress.start();
+  next();
+});
+
+router.afterEach(() => {
+  NProgress.done();
+});
+
+export default router;