diff --git a/components/providers/TransitionProvider.tsx b/components/providers/TransitionProvider.tsx index 5b649e899..6d27cdd17 100644 --- a/components/providers/TransitionProvider.tsx +++ b/components/providers/TransitionProvider.tsx @@ -15,8 +15,6 @@ export function TransitionProvider({ children }: { children: ReactNode }) { const [isTransitioning, setIsTransitioning] = useState(false); const [transitionMessage, setTransitionMessage] = useState(null); const router = useRouter(); - const pathname = usePathname(); - const searchParams = useSearchParams(); // We use a ref to track transition state without triggering the route change effect when it turns true const isTransitioningRef = React.useRef(isTransitioning); @@ -24,18 +22,6 @@ export function TransitionProvider({ children }: { children: ReactNode }) { isTransitioningRef.current = isTransitioning; }, [isTransitioning]); - // Watch for route changes to complete the transition - useEffect(() => { - if (isTransitioningRef.current) { - // The route has actually changed in the browser, or at least the RSC payload arrived - const timer = setTimeout(() => { - setIsTransitioning(false); - setTimeout(() => setTransitionMessage(null), 300); - }, 100); - return () => clearTimeout(timer); - } - }, [pathname, searchParams]); // Run when pathname or search parameters change - const startTransition = useCallback((href: string, message: string | null = null) => { // Wenn wir bereits navigieren, nichts tun if (isTransitioning) return; @@ -75,11 +61,35 @@ export function TransitionProvider({ children }: { children: ReactNode }) { return ( + + + {children} ); } +function TransitionRouteWatcher({ isTransitioningRef, setIsTransitioning, setTransitionMessage }: any) { + const pathname = usePathname(); + const searchParams = useSearchParams(); + + useEffect(() => { + if (isTransitioningRef.current) { + const timer = setTimeout(() => { + setIsTransitioning(false); + setTimeout(() => setTransitionMessage(null), 300); + }, 100); + return () => clearTimeout(timer); + } + }, [pathname, searchParams, setIsTransitioning, setTransitionMessage, isTransitioningRef]); + + return null; +} + export function useTransition() { const context = useContext(TransitionContext); if (!context) {