Added Loading Progressbar

Author: a3ryk

src/pages/components/ProgressBar.js

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+// Customizing the progress bar speed and look
+NProgress.configure({ showSpinner: false, speed: 500, minimum: 0.2 });
+
+const ProgressBar = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleStart = () => {
+      NProgress.start();
+    };
+    const handleStop = () => {
+      setTimeout(() => NProgress.done(), 500); // Delay finishing to prevent flashing
+    };
+
+    router.events.on("routeChangeStart", handleStart);
+    router.events.on("routeChangeComplete", handleStop);
+    router.events.on("routeChangeError", handleStop);
+
+    return () => {
+      router.events.off("routeChangeStart", handleStart);
+      router.events.off("routeChangeComplete", handleStop);
+      router.events.off("routeChangeError", handleStop);
+    };
+  }, [router]);
+
+  return null;
+};
+
+export default ProgressBar;