fix animation mobile

2 files changed, 6 insertions, 10 deletions

diff --git a/src/core/components/layouts/AnimationLayout.jsx b/src/core/components/layouts/AnimationLayout.jsx
index 6884fb4b..7acf21dc 100644
--- a/src/core/components/layouts/AnimationLayout.jsx
+++ b/src/core/components/layouts/AnimationLayout.jsx
@@ -14,7 +14,7 @@ const AnimationLayout = ({ children, ...props }) => {
     opacity: 1,
     x: 0,
     y: 0,
-    transition: { duration: 0.2, ease: 'easeInOut' }
+    transition: { duration: 0.2, delay: 0.2, ease: 'easeInOut' }
   }
 
   const exitConfig = {
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index e32efc19..8b13cc0b 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -4,11 +4,13 @@ import { useRouter } from 'next/router'
 import { AnimatePresence } from 'framer-motion'
 import { Toaster } from 'react-hot-toast'
 import { QueryClient, QueryClientProvider } from 'react-query'
+import useDevice from '@/core/hooks/useDevice'
 
 const queryClient = new QueryClient()
 
 function MyApp({ Component, pageProps }) {
   const router = useRouter()
+  const { isMobile } = useDevice()
 
   return (
     <>
@@ -19,20 +21,14 @@ function MyApp({ Component, pageProps }) {
           className: 'border border-gray_r-8'
         }}
       />
-      <NextProgress
-        color='#F01C21'
-        options={{ showSpinner: false }}
-      />
+      <NextProgress color='#F01C21' options={{ showSpinner: false }} />
       <QueryClientProvider client={queryClient}>
         <AnimatePresence
-          mode='wait'
+          mode={isMobile ? 'wait' : 'sync'}
           initial={false}
           onExitComplete={() => window.scrollTo(0, 0)}
         >
-          <Component
-            {...pageProps}
-            key={router.asPath}
-          />
+          <Component {...pageProps} key={router.asPath} />
         </AnimatePresence>
       </QueryClientProvider>
     </>