From 0c11cc399aff73816de4ba142d728230fb63dc2b Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 21 Jun 2022 15:17:01 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9A=92=EF=B8=8F=20Add=20nprogress=20&=20page?=
 =?UTF-8?q?=20transitions.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/_app.tsx | 45 +++++++++++++++++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 7020846..2fc8662 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -8,19 +8,48 @@ import "@/styles/globals.css";
 // Layout ->
 import Layout from "@/layout";
 
+// Nextjs Progressbar ->
+import NextNProgress from "nextjs-progressbar";
+
+// Framer ->
+import { motion } from "framer-motion";
+
 // SWR Config & services ->
 import { SWRConfig } from "swr";
 import { fetcher } from "@/services/fetcher";
 
-function MyApp({ Component, pageProps }: AppProps) {
+function MyApp({ Component, pageProps, router }: AppProps) {
   return (
-    <ChakraProvider theme={theme}>
-      <SWRConfig value={{ fetcher }}>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-      </SWRConfig>
-    </ChakraProvider>
+    <>
+      <NextNProgress
+        color="#4343E5"
+        startPosition={0.3}
+        stopDelayMs={200}
+        height={3}
+        showOnShallow={true}
+      />
+      <ChakraProvider theme={theme}>
+        <SWRConfig value={{ fetcher }}>
+          <Layout>
+            <motion.div
+              key={router.route}
+              initial="initial"
+              animate="animate"
+              variants={{
+                initial: {
+                  opacity: 0,
+                },
+                animate: {
+                  opacity: 1,
+                },
+              }}
+            >
+              <Component {...pageProps} />
+            </motion.div>
+          </Layout>
+        </SWRConfig>
+      </ChakraProvider>
+    </>
   );
 }