From 8d7f99848ca93b19585434c2baa9a81d844f2de8 Mon Sep 17 00:00:00 2001 From: lukas Date: Sun, 13 Sep 2026 19:55:14 +0200 Subject: [PATCH] Animate the Orders list out on sign out via the View Transitions API MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/integrations/better-auth/header-user.tsx | 22 +++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/integrations/better-auth/header-user.tsx b/src/integrations/better-auth/header-user.tsx index cb267d3..1f1a359 100644 --- a/src/integrations/better-auth/header-user.tsx +++ b/src/integrations/better-auth/header-user.tsx @@ -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() + } + }, }, }) }}