How to use <Suspense> only on first load

[ol1s]

When using async setup() in nested components it is really useful being able to resolve all the async calls using a single top level <Suspense> wrapper.

This provides a particularly nice experience when first booting the app, as we can display a single loader - instead of a cascade of loaders whilst each nested component resolves.

When navigating to subsequent routes we can make our top-level loader appear again by adding:

<Suspense timeout="0">

However this feels a bit clunky after the initial load, and would be better if the component could handle the loading itself.

So my question is, how can I get the initial async calls to resolve using <Suspense> but all subsequent calls to be handled by the component?

[ol1s]

This is the solution I came to in the end:

async setup() {

  const booted = ref(false)
  const loading = ref(false)
  const data = ref({})

  onMounted(() => {
    if (booted.value) {
      //this fires for all subsequent routes and
      //handles loading state within the component
      loading.value = true
      data.value = await fetchData(...)
      loading.value = false
    } else {
      booted.value = true
    }
  })

  if (!booted.value) {
    //this fires on inital boot only
    //and gets resolved by <Suspense>
    data.value = await fetchData(...)
  }

  return {
    data
  }
}