Fix page transition animation - properly reset transition state after navigation

client/src/components/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { 
   HomeIcon, 
@@ -18,15 +18,16 @@ interface User {
 const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const location = useLocation();
   const [isTransitioning, setIsTransitioning] = useState(false);
-  const [currentPath, setCurrentPath] = useState(location.pathname);
+  const previousPathRef = useRef(location.pathname);
   const userData = localStorage.getItem('user');
   const user: User | null = userData ? JSON.parse(userData) : null;
 
   // Handle page transitions
   useEffect(() => {
-    if (location.pathname !== currentPath) {
+    // Only trigger transition if path actually changed
+    if (location.pathname !== previousPathRef.current) {
       setIsTransitioning(true);
-      setCurrentPath(location.pathname);
+      previousPathRef.current = location.pathname;
       
       // End transition after animation
       const timer = setTimeout(() => {
@@ -35,7 +36,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
       
       return () => clearTimeout(timer);
     }
-  }, [location.pathname, currentPath]);
+  }, [location.pathname]);
 
   const handleLogout = () => {
     localStorage.removeItem('token');