From 7e8833b58426281799f0a646475aa9e215b07d69 Mon Sep 17 00:00:00 2001
From: rramiachraf <51409801+rramiachraf@users.noreply.github.com>
Date: Thu, 9 Mar 2023 20:04:58 +0100
Subject: [PATCH] feat: show progress bar when navigating to different routes

---
 package.json         |  1 +
 src/App.vue          |  7 +++++++
 src/router/router.js | 12 ++++++++++++
 yarn.lock            |  5 +++++
 4 files changed, 25 insertions(+)

diff --git a/package.json b/package.json
index c303cb27..05a1544b 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
         "hotkeys-js": "3.10.1",
         "javascript-time-ago": "2.5.9",
         "mux.js": "6.3.0",
+        "nprogress": "^0.2.0",
         "shaka-player": "4.3.5",
         "stream-browserify": "3.0.0",
         "vue": "3.2.47",
diff --git a/src/App.vue b/src/App.vue
index 94960027..719d2b17 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -272,4 +272,11 @@ h2 {
 .thumbnail-left {
     @apply bottom-5px left-5px text-xs font-bold bg-red-600 uppercase;
 }
+
+#nprogress .bar {
+    background: #ed3e2d;
+}
+#nprogress .peg {
+    box-shadow: 0 0 10px #ed3e2d, 0 0 5px #ed3e2d;
+}
 </style>
diff --git a/src/router/router.js b/src/router/router.js
index 29bb7c61..9895e737 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -1,4 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
 
 const routes = [
     {
@@ -95,4 +97,14 @@ const router = createRouter({
     },
 });
 
+NProgress.configure({ showSpinner: false });
+
+router.beforeEach(() => {
+    NProgress.start();
+});
+
+router.afterEach(() => {
+    NProgress.done();
+});
+
 export default router;
diff --git a/yarn.lock b/yarn.lock
index fefc2361..40f2191a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3960,6 +3960,11 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
+
 nth-check@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.1.tgz#2efe162f5c3da06a28959fbd3db75dbeea9f0fc2"