loading and catalog card

components/pageTransition/pageTransition.tsx

@@ -3,19 +3,35 @@ import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import "./page-transition.css";
 
-export default function PageTransition({ children }: { children: React.ReactNode }) {
+export default function PageTransition({ 
+  children 
+}: { 
+  children: React.ReactNode 
+}) {
   const pathname = usePathname();
+  const [displayPath, setDisplayPath] = useState(pathname);
   const [isTransitioning, setIsTransitioning] = useState(false);
 
   useEffect(() => {
-    setIsTransitioning(true);
-    
-    const timer = setTimeout(() => {
-      setIsTransitioning(false);
-    }, 1500); // Animatsiya davomiyligi
+    if (pathname !== displayPath) {
+      // Start exit animation
+      setIsTransitioning(true);
 
-    return () => clearTimeout(timer);
-  }, [pathname]);
+      const exitTimer = setTimeout(() => {
+        // Update path (triggers content change)
+        setDisplayPath(pathname);
+        
+        // Start enter animation
+        const enterTimer = setTimeout(() => {
+          setIsTransitioning(false);
+        }, 800); // Enter animation duration
+
+        return () => clearTimeout(enterTimer);
+      }, 800); // Exit animation duration
+
+      return () => clearTimeout(exitTimer);
+    }
+  }, [pathname, displayPath]);
 
   return (
     <>
@@ -32,7 +48,6 @@ export default function PageTransition({ children }: { children: React.ReactNode
               <stop offset="50%" stopColor="#ff4444" />
               <stop offset="100%" stopColor="#ff0000" />
             </linearGradient>
-            
             <filter id="transition-glow">
               <feGaussianBlur stdDeviation="5" result="coloredBlur"/>
               <feMerge>
@@ -53,7 +68,7 @@ export default function PageTransition({ children }: { children: React.ReactNode
           </g>
         </svg>
       </div>
-      
+
       {/* Page content */}
       <div className={`page-content ${isTransitioning ? "transitioning" : ""}`}>
         {children}