1225b55786
ViewTransitionOutlet was using animate-fade-in-up (opacity + translateY) on every route change, causing visible content shift on navigation. Switch to animate-fade-in (opacity only) for a subtler transition. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
27 lines
990 B
TypeScript
27 lines
990 B
TypeScript
import { Outlet, useLocation } from 'react-router-dom'
|
|
|
|
/**
|
|
* Wraps <Outlet> with a fade-in animation keyed to the route path.
|
|
* When the route changes, React unmounts/remounts the wrapper div,
|
|
* triggering the CSS animation. Sidebar and topbar stay still.
|
|
*
|
|
* Uses flex-1 + min-h-0 to fill the main content area exactly.
|
|
* overflow-y-auto enables scrolling for normal pages while full-height
|
|
* pages (tree editor, etc.) use their own overflow:hidden to take
|
|
* the exact container height without scrolling.
|
|
*/
|
|
export function ViewTransitionOutlet() {
|
|
const location = useLocation()
|
|
|
|
// Use the first two path segments as the key to avoid re-animating
|
|
// on param changes within the same page (e.g., /trees/123 → /trees/456)
|
|
const segments = location.pathname.split('/').filter(Boolean)
|
|
const routeKey = segments.slice(0, 2).join('/') || '/'
|
|
|
|
return (
|
|
<div key={routeKey} className="flex-1 min-h-0 flex flex-col animate-fade-in">
|
|
<Outlet />
|
|
</div>
|
|
)
|
|
}
|