⚒️ Add nprogress & page transitions.

This commit is contained in:
pheralb 2022-06-21 15:17:01 +01:00
parent 6ee9acba5a
commit 0c11cc399a

View File

@ -8,19 +8,48 @@ import "@/styles/globals.css";
// Layout -> // Layout ->
import Layout from "@/layout"; import Layout from "@/layout";
// Nextjs Progressbar ->
import NextNProgress from "nextjs-progressbar";
// Framer ->
import { motion } from "framer-motion";
// SWR Config & services -> // SWR Config & services ->
import { SWRConfig } from "swr"; import { SWRConfig } from "swr";
import { fetcher } from "@/services/fetcher"; import { fetcher } from "@/services/fetcher";
function MyApp({ Component, pageProps }: AppProps) { function MyApp({ Component, pageProps, router }: AppProps) {
return ( return (
<ChakraProvider theme={theme}> <>
<SWRConfig value={{ fetcher }}> <NextNProgress
<Layout> color="#4343E5"
<Component {...pageProps} /> startPosition={0.3}
</Layout> stopDelayMs={200}
</SWRConfig> height={3}
</ChakraProvider> 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>
</>
); );
} }