From 5e2b810db508dbe10e0f70d7c5466caa8b6d07e1 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Thu, 3 Feb 2022 00:03:19 +0300
Subject: [PATCH] add loading on routing

---
 src/pages/_app.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 8005c3a..c5fc35a 100644
--- a/src/pages/_app.tsx
+++ b/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 />