Loading Progress

React for nprogress.

JSX
// @/components/nprogress.js

import NProgress from 'nprogress';
import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function Progress() {
  const router = useRouter();

  useEffect(() => {
    let timeout;

    const start = () => {
      timeout = setTimeout(NProgress.start, 100);
    };

    const done = () => {
      clearTimeout(timeout);
      NProgress.done();
    };

    router.events.on('routeChangeStart', start);
    router.events.on('routeChangeComplete', done);
    router.events.on('routeChangeError', done);
    return () => {
      router.events.off('routeChangeStart', start);
      router.events.off('routeChangeComplete', done);
      router.events.off('routeChangeError', done);
    };
  }, []);
  return <></>;
}

CSS
/* @/styles/nprogress.css */

/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #845ef7;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}

JSX
// pages/_app.js

import '@styles/nprogress.css';
import type { AppProps } from 'next/app';
import NProgress from '@/components/nprogress';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <NProgress />
    </>
  );
}