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:
@@ -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()
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user