demo · v134

Per-link loading indicator

The TPAC discussion that produced sourceElement kept circling one frustration: SPA frameworks want to show a spinner on the specific link the user clicked, not a global top bar. Before sourceElement, intercepting navigate told you only the destination URL — you had to keep your own map from URL back to DOM. With navigate.sourceElement the framework gets the click target for free. Click any item and watch only its row light up.

probing NavigateEvent.sourceElement…

Twelve links, one interceptor

The interceptor

navigation.addEventListener('navigate', (e) => {
  if (!e.canIntercept) return;
  // sourceElement is the <a>/<button>/<form> the click originated from.
  // For programmatic navigation it is null.
  e.sourceElement?.classList.add('loading');
  e.intercept({ async handler() {
    await fakeFetch(e.destination.url);
    e.sourceElement?.classList.remove('loading');
  } });
});

see also