add loading on routing

src/pages/_app.tsx

@@ -1,9 +1,29 @@
+import React from "react";
 import GlobalStyle from "src/constants/globalStyle";
 import { darkTheme } from "src/constants/theme";
 import type { AppProps } from "next/app";
 import { ThemeProvider } from "styled-components";
+import { useRouter } from "next/router";
+import { Loading } from "src/components/Loading";
 
 function AykutSarac({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+  const [pageLoading, setPageLoading] = React.useState<boolean>(false);
+  React.useEffect(() => {
+    const handleStart = () => {
+      setPageLoading(true);
+    };
+    const handleComplete = () => {
+      setPageLoading(false);
+    };
+
+    router.events.on("routeChangeStart", handleStart);
+    router.events.on("routeChangeComplete", handleComplete);
+    router.events.on("routeChangeError", handleComplete);
+  }, [router]);
+
+  if (pageLoading) return <Loading />;
+
   return (
     <ThemeProvider theme={darkTheme}>
       <GlobalStyle />