feat(ui): add AnimatedGlossyBorder and refine industrial interactions

components/providers/TransitionProvider.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
-import { useRouter } from 'next/navigation';
+import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
 
 interface TransitionContextType {
   isTransitioning: boolean;
@@ -15,13 +15,39 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
   const [isTransitioning, setIsTransitioning] = useState(false);
   const [transitionMessage, setTransitionMessage] = useState<string | null>(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);
+  useEffect(() => {
+    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;
     
+    // Normalize paths to avoid false mismatches (e.g. /de vs /de/)
+    const currentPath = typeof window !== 'undefined' ? window.location.pathname.replace(/\/$/, '') || '/' : '';
+    const targetPath = href.split('?')[0].replace(/\/$/, '') || '/';
+    const currentSearch = typeof window !== 'undefined' ? window.location.search : '';
+    const targetSearch = href.includes('?') ? '?' + href.split('?')[1] : '';
+
     // Aktuelle URL prüfen, falls es dieselbe ist, nicht navigieren
-    if (typeof window !== 'undefined' && window.location.pathname === href) {
+    if (currentPath === targetPath && currentSearch === targetSearch) {
        // Optional: Wir könnten weich nach oben scrollen
        window.scrollTo({ top: 0, behavior: 'smooth' });
        return;
@@ -34,13 +60,16 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
     setTimeout(() => {
       router.push(href);
       
-      // Den Shutter wieder einfahren lassen, nachdem die Seite gewechselt hat
-      // Next.js Route-Changes sind fast sofort da, aber wir geben dem Cache kurz Zeit
+      // Fallback: If for some reason the route doesn't change after 5 seconds, open the shutter anyway
       setTimeout(() => {
-        setIsTransitioning(false);
-        // Message etwas verzögert zurücksetzen, damit es während dem Ausblenden nicht verschwindet
-        setTimeout(() => setTransitionMessage(null), 300);
-      }, 300);
+        setIsTransitioning((current) => {
+          if (current) {
+            setTimeout(() => setTransitionMessage(null), 300);
+            return false;
+          }
+          return current;
+        });
+      }, 5000);
     }, 700);
   }, [isTransitioning, router]);