fix: show loading state on route changing

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

@@ -1,6 +1,9 @@
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
+import Router from "next/router";
 
+import { Backdrop } from "@app/components/Backdrop";
 import { Main } from "@app/components/Container/Main";
+import { FullPageLoader } from "@app/components/FullPageLoader";
 import { Header } from "@app/components/Header";
 import { Sidebar } from "@app/components/Sidebar";
 import { SidebarContext, SidebarProvider } from "@app/context/SidebarContext";
@@ -15,9 +18,30 @@ export function Layout({ children }: ILayout) {
   useSignOut();
   const { isSidebarOpen } = useContext(SidebarContext);
   const { theme } = useTheme();
+  const [isChangingRoute, setIsChangingRoute] = useState(false);
+
+  useEffect(() => {
+    const start = () => setIsChangingRoute(true);
+    const done = () => setIsChangingRoute(false);
+
+    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 (
     <SidebarProvider>
+      {isChangingRoute ? (
+        <Backdrop className="z-[100] transition-all duration-150">
+          <FullPageLoader />
+        </Backdrop>
+      ) : null}
       <div
         className={`h-screen ${theme} ${isSidebarOpen && "overflow-hidden"}`}
       >