Using Loading with async setup and Suspense

[bajaco]

Is it acceptable to use Loading in an async setup?

Specifically I am using the <script setup> syntax, with top-level awaits.

// Router view
<Suspense>
  <router-view />
  <template #fallback>
    <div />
  </template
</Suspense>

// In the page's script setup

Loading.show()
myVar.value = await store.getSomeStuff()
Loading.hide()

It works, to be sure, but displays the following console warning:

[Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead. 
  at <BaseTransition onAfterLeave=fn<onAfterLeave> appear=true persisted=false  ... > 
  at <Transition name="q-transition--fade" appear=true onAfterLeave=fn<onAfterLeave> > 
  at <QLoading>

Which seems to be a result of calling Loading while it is displaying the fallback content. Is there a way to suppress this warning, or a less stupid way to do this? I wish I could just put a loading component in the Suspense fallback content, but that is only displayed for initial load, not each time the component is loaded.

[lukadriel7]

Hello, the following is the recommended way to handle async

<RouterView v-slot="{ Component }">
  <template v-if="Component">
    <Transition mode="out-in">
      <KeepAlive>
        <Suspense>
          <!-- main content -->
          <component :is="Component"></component>

          <!-- loading state -->
          <template #fallback>
            Loading...
          </template>
        </Suspense>
      </KeepAlive>
    </Transition>
  </template>
</RouterView>

Technically you could put the loading component in the fallback slot