Native browser loading state

With the new Navigation API, you can now show the native spinner + stop button for any asynchronous operation - all you need is a Promise.

function showLoading(promise) {
  navigation.addEventListener(
    'navigate',
    (event) => {
      event.intercept({
        scroll: 'manual',
        handler: () => promise,
      })
    },
    { once: true }
  )
  return navigation.navigate(location.href).finished
}

// show browser loading UI
showLoading(new Promise((r) => setTimeout(r, 1500)))

Further reading

• https://developer.chrome.com/docs/web-platform/navigation-api/#intercepting