Add loading between pages

2026-05-01 18:00:26 +00:00 · 2021-08-16 15:42:21 +01:00
parent 9a39e89f48
commit 07c97a29b5
4 changed files with 43 additions and 0 deletions
@@ -1,5 +1,9 @@
+import { useEffect } from 'react';
+
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
+
 import Nav from '../components/Nav';
 import DarkMode from '../components/DarkMode';
 import Container from '../components/Container';
@@ -7,7 +11,28 @@ import GlobalStyles from '../components/GlobalStyles';
 import Theme from '../components/Theme';
 import Footer from '../components/Footer';

+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+NProgress.configure({ showSpinner: false });
+
 const App = ({ Component, pageProps }: AppProps) => {
+	const router = useRouter();
+
+	useEffect(() => {
+		router.events.on('routeChangeStart', () => {
+			NProgress.start();
+		});
+
+		router.events.on('routeChangeComplete', () => {
+			NProgress.done();
+		});
+
+		router.events.on('routeChangeError', () => {
+			NProgress.done();
+		});
+	}, []);
+
 	return (
 		<>
 			<Head>