1 files changed, 57 insertions, 42 deletions

diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 3fe1d3cf..aa545863 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -1,58 +1,73 @@
-import '@/fonts/Inter/inter.css'
-import '@/styles/globals.css'
-import 'react-loading-skeleton/dist/skeleton.css'
+import '@/fonts/Inter/inter.css';
+import '@/styles/globals.css';
+import 'react-loading-skeleton/dist/skeleton.css';
 
-import NextProgress from 'next-progress'
-import { useRouter, Router } from 'next/router'
-import { AnimatePresence, motion } from 'framer-motion'
-import { Toaster } from 'react-hot-toast'
-import { QueryClient, QueryClientProvider } from 'react-query'
-import useDevice from '@/core/hooks/useDevice'
-import { useEffect, useState } from 'react'
-import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
-import { SessionProvider } from 'next-auth/react'
-import { ProductProvider } from '@/contexts/ProductContext'
-import { ProductCartProvider } from '@/contexts/ProductCartContext'
-import { ChakraProvider } from '@chakra-ui/react'
-import theme from '../../chakra.theme'
+import { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
+import { useRouter, Router } from 'next/router';
+import { AnimatePresence, motion } from 'framer-motion';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
-const queryClient = new QueryClient()
+import useDevice from '@/core/hooks/useDevice';
+import { ProductProvider } from '@/contexts/ProductContext';
+import { ProductCartProvider } from '@/contexts/ProductCartContext';
+import theme from '../../chakra.theme';
+
+const NextProgress = dynamic(() => import('next-progress'), { ssr: false });
+const ChakraProvider = dynamic(
+  () => import('@chakra-ui/react').then((mod) => mod.ChakraProvider),
+  { ssr: false }
+);
+const SessionProvider = dynamic(
+  () => import('next-auth/react').then((mod) => mod.SessionProvider),
+  { ssr: false }
+);
+const LogoSpinner = dynamic(
+  () => import('@/core/components/elements/Spinner/LogoSpinner'),
+  { ssr: false }
+);
+const Toaster = dynamic(
+  () => import('react-hot-toast').then((mod) => mod.Toaster),
+  { ssr: false }
+);
+
+const queryClient = new QueryClient();
 
 function MyApp({ Component, pageProps: { session, ...pageProps } }) {
-  const router = useRouter()
-  const { isMobile } = useDevice()
+  const router = useRouter();
+  const { isMobile } = useDevice();
 
-  const [animateLoader, setAnimateLoader] = useState(false)
+  const [animateLoader, setAnimateLoader] = useState(false);
 
   useEffect(() => {
-    const handleRouteChangeStart = () => setAnimateLoader(true)
-    const handleRouteChangeComplete = () => setAnimateLoader(false)
+    const handleRouteChangeStart = () => setAnimateLoader(true);
+    const handleRouteChangeComplete = () => setAnimateLoader(false);
 
-    Router.events.on('routeChangeStart', handleRouteChangeStart)
-    Router.events.on('routeChangeComplete', handleRouteChangeComplete)
-    Router.events.on('routeChangeError', handleRouteChangeComplete)
+    Router.events.on('routeChangeStart', handleRouteChangeStart);
+    Router.events.on('routeChangeComplete', handleRouteChangeComplete);
+    Router.events.on('routeChangeError', handleRouteChangeComplete);
 
     return () => {
-      Router.events.off('routeChangeStart', handleRouteChangeStart)
-      Router.events.off('routeChangeComplete', handleRouteChangeComplete)
-      Router.events.off('routeChangeError', handleRouteChangeComplete)
-    }
-  }, [])
+      Router.events.off('routeChangeStart', handleRouteChangeStart);
+      Router.events.off('routeChangeComplete', handleRouteChangeComplete);
+      Router.events.off('routeChangeError', handleRouteChangeComplete);
+    };
+  }, []);
 
-  const [toasterStyle, setToasterStyle] = useState({})
+  const [toasterStyle, setToasterStyle] = useState({});
 
   useEffect(() => {
-    let elems = document.querySelectorAll('nav')
-    let totalNavHeight = 0
+    let elems = document.querySelectorAll('nav');
+    let totalNavHeight = 0;
 
     elems.forEach(function (elem) {
-      totalNavHeight += elem.offsetHeight
-    })
+      totalNavHeight += elem.offsetHeight;
+    });
 
     setToasterStyle({
-      marginTop: isMobile ? totalNavHeight - 8 : totalNavHeight
-    })
-  }, [isMobile])
+      marginTop: isMobile ? totalNavHeight - 8 : totalNavHeight,
+    });
+  }, [isMobile]);
 
   return (
     <SessionProvider session={session}>
@@ -63,7 +78,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
             animate={{ opacity: 1 }}
             exit={{ opacity: 0.4 }}
             transition={{
-              duration: 0.1
+              duration: 0.1,
             }}
             className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center'
           >
@@ -76,7 +91,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
         containerStyle={toasterStyle}
         toastOptions={{
           duration: 3000,
-          className: 'border border-gray_r-8'
+          className: 'border border-gray_r-8',
         }}
       />
       <NextProgress color='#F01C21' options={{ showSpinner: false }} />
@@ -90,7 +105,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
         </ProductProvider>
       </QueryClientProvider>
     </SessionProvider>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;