Post(s) tagged NProgress
Next.js add top progress bar fetch and router events using NProgress
Here are the steps to show the top progress bar like Youtube.
First, install nprogress
package using the below command
npm install nprogress
Then create components/TopProgressBar.js
and add the following code
import Router from "next/router";
import NProgress from "nprogress";
let timer;
let state;
let activeRequests = 0;
const delay = 5;
const load = () => {
if (state === "loading") {
return;
}
state = "loading";
timer = setTimeout(function () {
NProgress.start();
}, delay);
}
const stop = () => {
if (activeRequests > 0) {
return;
}
state = "stop";
clearTimeout(timer);
NProgress.done();
}
Router.events.on("routeChangeStart", load);
Router.events.on("routeChangeComplete", stop);
Router.events.on("routeChangeError", stop);
const originalFetch = window.fetch;
window.fetch = async function (...args) {
if (activeRequests === 0) {
load();
}
activeRequests++;
try {
const response = await originalFetch(...args);
return response;
} catch (error) {
return Promise.reject(error);
} finally {
activeRequests -= 1;
if (activeRequests === 0) {
stop();
}
}
};
export default function () {
return null;
}
Finally, add this component to _app.js
import "nprogress/nprogress.css";
const TopProgressBar = dynamic(() => {
return import("components/TopProgressBar");
}, { ssr: false });
export default function MyApp({ Component, pageProps }) {
return <>
<TopProgressBar />
<Component {...pageProps} />
</>
}
That's it. It will show the top progress bar automatically.
Posted on February 19, 2022