v144 · performance · demo

Loading States

The real-world case: a simulated SPA where navigating between pages triggers an async data fetch before the transition completes. transition.waitUntil(fetchData()) keeps the transition open until the data is ready — the timeline below tracks each phase from setup through animation to finished.

startViewTransition: checking… waitUntil method: checking…

Home

Welcome. Navigate to another page to trigger a view transition that waits for async data to load. The loading spinner shows during the waiting phase.

Articles

Recent articles — loaded asynchronously:

  • Loading…

Profile

User data — fetched asynchronously:

  • Loading…

Transition phase timeline

setup —
capturing —
waiting (async) —
animating —
finished —

Promise states

updateCallbackDone pending
ready pending
finished pending

Event log

—Navigate between pages above to begin.

the API

// SPA page navigation with async data loading
async function navigateTo(page) {
  const transition = document.startViewTransition(async () => {
    showLoadingSpinner();
    swapPage(page);               // DOM update (synchronous part)
  });

  // waitUntil() keeps the transition "open" until data is ready
  // transition won't enter the animation phase until this resolves
  transition.waitUntil(fetchData(page));  // NEW in Chrome 144

  // Track promise states
  transition.updateCallbackDone.then(() => log('callback done'));
  transition.ready.then(() => log('ready — animating'));
  await transition.finished;
  log('finished');
}

// Feature detect
const hasWaitUntil = typeof document.startViewTransition === 'function'
  && (() => {
    const t = document.startViewTransition(() => {});
    const has = typeof t.waitUntil === 'function';
    t.skipTransition();
    return has;
  })();

see also