feat(client): add progressbar on top, and fix loading state on page t…

…ransition

apps/client/package.json

@@ -39,6 +39,7 @@
     "next-contentlayer": "^0.3.1",
     "next-i18next": "^13.2.2",
     "next-sitemap": "^4.0.6",
+    "nextjs-progressbar": "^0.0.16",
     "nookies": "^2.5.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/client/src/components/Layout/Page.tsx

@@ -51,17 +51,24 @@ export function PageLayout({
   }, [router.asPath]);
 
   useEffect(() => {
-    const handler = () => {
+    const handleRouteChangeStart = () => {
       setIsTransitioning(true);
-      setTimeout(() => {
-        setIsTransitioning(false);
-      }, 280);
+    };
+    const handleRouteChangeCompleteOrError = () => {
+      setIsTransitioning(false);
     };
 
-    router.events.on("routeChangeComplete", handler);
+    router.events.on("routeChangeStart", handleRouteChangeStart);
+    router.events.on("routeChangeComplete", handleRouteChangeCompleteOrError);
+    router.events.on("routeChangeError", handleRouteChangeCompleteOrError);
 
     return () => {
-      router.events.off("routeChangeComplete", handler);
+      router.events.off("routeChangeStart", handleRouteChangeStart);
+      router.events.off(
+        "routeChangeComplete",
+        handleRouteChangeCompleteOrError
+      );
+      router.events.off("routeChangeError", handleRouteChangeCompleteOrError);
     };
   }, [router.events]);
 

apps/client/src/pages/_app.tsx

@@ -6,6 +6,7 @@ import { Inter } from "next/font/google";
 import Script from "next/script";
 import { SessionProvider } from "next-auth/react";
 import { appWithTranslation } from "next-i18next";
+import NextNProgress from "nextjs-progressbar";
 
 import { Header } from "@app/components/Layout/Header";
 import { ThemeProvider } from "@app/contexts/theme";
@@ -26,6 +27,10 @@ function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
         <SessionProvider session={session}>
           <QueryClientProvider client={queryClient}>
             <ThemeProvider>
+              <NextNProgress
+                height={5}
+                showOnShallow
+              />
               <div className="flex flex-col h-full gap-2.5 md:flex-row">
                 <Header />
                 <Component {...pageProps} />