From 40bab7be1e0025c7c089e1eac17451ef155a989a Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Sat, 19 Nov 2022 13:55:00 +0700
Subject: Add page transition

---
 src/pages/_app.js | 25 ++++++++-----------------
 1 file changed, 8 insertions(+), 17 deletions(-)

(limited to 'src/pages/_app.js')

diff --git a/src/pages/_app.js b/src/pages/_app.js
index db14ca15..faa8b2b4 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -1,23 +1,14 @@
 import '../styles/globals.css';
-import NextProgress from "next-progress";
+import NextProgress from 'next-progress';
 import { ToastContainer, Slide } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import Image from 'next/image';
+import { AnimatePresence } from 'framer-motion';
 
 function MyApp({ Component, pageProps }) {
   const router = useRouter();
-  const [pageLoading, setPageLoading] = useState(false);
-
-  useEffect(() => {
-    const handleStartLoading = () => { setPageLoading(true) };
-    const handleCompleteLoading = () => { setPageLoading(false) };
-
-    router.events.on('routeChangeStart', handleStartLoading);
-    router.events.on('routeChangeComplete', handleCompleteLoading);
-    router.events.on('routeChangeError', handleCompleteLoading);
-  }, [router]);
 
   return (
     <>
@@ -32,12 +23,12 @@ function MyApp({ Component, pageProps }) {
       <NextProgress color="#D7A30A" options={{
         showSpinner: false,
       }} />
-      {pageLoading ? (
-        <div className='h-screen w-screen flex flex-col justify-center items-center'>
-          <Image src='/images/loading.gif' width={96} height={96} alt='Loading Indoteknik' />
-          <h1>Loading</h1>
-        </div>
-      ) : <Component {...pageProps} />}
+      <AnimatePresence
+        mode='sync'
+        initial={false}
+      >
+        <Component {...pageProps} />
+      </AnimatePresence>
     </>
   )
 }
-- 
cgit v1.2.3