Native browser loading state | Zander's Code Notes

👋 FYI, this note is over 6 months old. Some of the content may be out of date.

On this page

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 Jump to heading