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()
|
clearBasket()
|
||||||
void authClient.signOut({
|
void authClient.signOut({
|
||||||
fetchOptions: {
|
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