Animate the Orders list out on sign out via the View Transitions API

Wraps the sign-out-triggered router.invalidate() in
document.startViewTransition() so the cleared order cards cross-fade
out (and the empty state fades in) instead of popping away instantly.
Each order card already carries its own view-transition-name (see
OrdersListView), so this reuses that per-card exit; the existing
::view-transition-group(*) timing in globals.scss applies automatically.

Falls back to a plain invalidate() where the API is unsupported, and
swallows rejection on the transition's ready/finished promises since
the browser can abort it in some states (e.g. a backgrounded tab) —
router.invalidate() still runs regardless.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-13 19:55:14 +02:00
co-authored by Claude Sonnet 5
parent f819b0cd46
commit 8d7f99848c
+21 -1
View File
@@ -153,7 +153,27 @@ const BetterAuthHeader = () => {
clearBasket()
void authClient.signOut({
fetchOptions: {
onSuccess: () => void router.invalidate(),
onSuccess: () => {
// Cross-fades the now-cleared Orders list out (and
// the empty state in) instead of popping instantly —
// each order card already carries its own
// `view-transition-name` (see OrdersListView), so
// this reuses that for a proper per-card exit.
if ('startViewTransition' in document) {
// Rejects if the browser can't actually run the
// transition right now (e.g. the tab isn't
// visible) — router.invalidate() still runs either
// way, so there's nothing to handle beyond not
// leaving this as an unhandled rejection.
const transition = document.startViewTransition(() =>
router.invalidate(),
)
transition.ready.catch(() => {})
transition.finished.catch(() => {})
} else {
void router.invalidate()
}
},
},
})
}}