demo · v142

Navigation Queue Strategies

SPA routers face a race: users click routes faster than view transitions can finish. document.activeViewTransition is the hook that lets routers make an informed decision. Two classic strategies — drop (ignore racing clicks) and queue-latest (let the current transition finish, then run the most-recent pending navigation) — are shown side-by-side. Switch strategy and spam the route buttons to see the difference.

Probing document.activeViewTransition…

Drop: if a transition is active when a new route is clicked, ignore the click. Good for read-heavy SPAs where the current view should finish before ceding to new content.

home

transition count: 0

document.activeViewTransition: null

queued route: —

0 completed

0 dropped

0 queued & run

/* Drop strategy */
function navigate(route) {
  if (document.activeViewTransition) {
    // A transition is active — drop this click
    return;
  }
  document.startViewTransition(() => updateRoute(route));
}

see also