fix error page checkout

src/components/wrapper/ClientSideWrapper.tsx

@@ -3,7 +3,7 @@
 import clsx from 'clsx'
 import { AnimatePresence, motion } from 'framer-motion'
 import { usePathname } from 'next/navigation'
-import React from 'react'
+import React, { useRef } from 'react'
 
 type Props = {
   children: React.ReactNode
@@ -12,15 +12,28 @@ type Props = {
 
 function ClientSideWrapper({ children, className = 'h-full' }: Props) {
   const pathname = usePathname()
+  const isFirstMount = useRef(true)
+  const prevPathname = useRef(pathname)
+
+  // تشخیص اولین mount
+  const isInitial = isFirstMount.current
+  if (isFirstMount.current) {
+    isFirstMount.current = false
+  }
+
+  // تشخیص تغییر pathname
+  const pathnameChanged = prevPathname.current !== pathname
+  prevPathname.current = pathname
 
   return (
-    <AnimatePresence mode="wait">
+    <AnimatePresence mode="sync">
       <motion.div
-        key={pathname} 
-        initial={{ opacity: 0, y: -10, }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: 0, transition: { duration: 0 } }}
+        key={pathname}
+        initial={isInitial || !pathnameChanged ? false : { y: -10 }}
+        animate={{ y: 0 }}
+        exit={{ y: 0, transition: { duration: 0 } }}
         transition={{ duration: 0.3 }}
+        style={{ opacity: 1 }}
         className={clsx(className)}
       >
         {children}