61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
interface TransitionContextType {
|
|
isTransitioning: boolean;
|
|
transitionMessage: string | null;
|
|
startTransition: (href: string, message?: string | null) => void;
|
|
}
|
|
|
|
const TransitionContext = createContext<TransitionContextType | undefined>(undefined);
|
|
|
|
export function TransitionProvider({ children }: { children: ReactNode }) {
|
|
const [isTransitioning, setIsTransitioning] = useState(false);
|
|
const [transitionMessage, setTransitionMessage] = useState<string | null>(null);
|
|
const router = useRouter();
|
|
|
|
const startTransition = useCallback((href: string, message: string | null = null) => {
|
|
// Wenn wir bereits navigieren, nichts tun
|
|
if (isTransitioning) return;
|
|
|
|
// Aktuelle URL prüfen, falls es dieselbe ist, nicht navigieren
|
|
if (typeof window !== 'undefined' && window.location.pathname === href) {
|
|
// Optional: Wir könnten weich nach oben scrollen
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
return;
|
|
}
|
|
|
|
setTransitionMessage(message);
|
|
setIsTransitioning(true);
|
|
|
|
// Die Animation des Shutters abwarten (ca. 700ms), dann pushen
|
|
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
|
|
setTimeout(() => {
|
|
setIsTransitioning(false);
|
|
// Message etwas verzögert zurücksetzen, damit es während dem Ausblenden nicht verschwindet
|
|
setTimeout(() => setTransitionMessage(null), 300);
|
|
}, 300);
|
|
}, 700);
|
|
}, [isTransitioning, router]);
|
|
|
|
return (
|
|
<TransitionContext.Provider value={{ isTransitioning, transitionMessage, startTransition }}>
|
|
{children}
|
|
</TransitionContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useTransition() {
|
|
const context = useContext(TransitionContext);
|
|
if (!context) {
|
|
throw new Error('useTransition must be used within a TransitionProvider');
|
|
}
|
|
return context;
|
|
}
|