Archived
austin
79fa690f7b
Clicking a nav link or a filter chip made the whole site look like it reloaded, because it did: body carried `opacity: 0` and a half-second fadeIn, so every navigation went blank, then slid 10px and faded back. Those two lines are the SPA's. There they ran once, when React booted, and every navigation afterwards happened inside a document that had already faded in. Server-rendered, every link is a new document, so a once-per-session animation became a once-per-click one — and the thing it was decorating was already fast. Replaced with the cross-document view transition it was reaching for: the browser holds the old page up until the new one is ready and cross-fades, so nothing is ever blank. Where it isn't supported the navigation is simply immediate, which is the right fallback and still better than a blank page. Reduced motion keeps the navigation and drops the cross-fade; the print rule no longer has to undo an opacity that isn't set any more.