_app.tsx 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. import React from "react";
  2. import GlobalStyle from "src/constants/globalStyle";
  3. import { darkTheme } from "src/constants/theme";
  4. import type { AppProps } from "next/app";
  5. import { ThemeProvider } from "styled-components";
  6. import { useRouter } from "next/router";
  7. import { Loading } from "src/components/Loading";
  8. import Head from "next/head";
  9. function AykutSarac({ Component, pageProps }: AppProps) {
  10. const router = useRouter();
  11. const [pageLoading, setPageLoading] = React.useState<boolean>(false);
  12. React.useEffect(() => {
  13. const handleStart = () => {
  14. setPageLoading(true);
  15. };
  16. const handleComplete = () => {
  17. setPageLoading(false);
  18. };
  19. router.events.on("routeChangeStart", handleStart);
  20. router.events.on("routeChangeComplete", handleComplete);
  21. router.events.on("routeChangeError", handleComplete);
  22. }, [router]);
  23. if (pageLoading)
  24. return (
  25. <ThemeProvider theme={darkTheme}>
  26. <GlobalStyle />
  27. <Head>
  28. <title>Loading... | JSON Visio</title>
  29. </Head>
  30. <Loading />
  31. </ThemeProvider>
  32. );
  33. return (
  34. <ThemeProvider theme={darkTheme}>
  35. <GlobalStyle />
  36. <Component {...pageProps} />
  37. </ThemeProvider>
  38. );
  39. }
  40. export default AykutSarac;