"NuxtPage / NuxtLayout component has not been used" warn when NuxtLayout async show up

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.10.2
• CLI Version: 3.10.1
• Nitro Version: 2.8.1
• Package Manager: npm@10.2.3
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-2vasos?file=app.vue

Describe the bug

I used <NuxtPage /> and <NuxtLayout /> components in the below way:

    <div v-if="loading">loading...</div>
    <NuxtLayout v-else>
      <NuxtPage />
    </NuxtLayout>

But it shows up the below warning in console log.

[nuxt] Your project has pages but the `<NuxtPage />` component has not been used. You might be using the `<RouterView />` component instead, which will not work correctly in Nuxt. You can set `pages: false` in `nuxt.config` if you do not wish to use the Nuxt `vue-router` integration.
[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.

Additional context

My purpose is fetching some environment data from server before NuxtLayout and NuxtPage rendered and shows a loading layout. In addition, I will use it with SSR off.

Logs

No response

Start with the linked StackBlitz reproduction, especially app.vue, and reproduce the warning when NuxtLayout and NuxtPage are rendered after loading completes. Trace the NuxtPage/NuxtLayout usage detection and its handling of conditional or async rendering; done means the documented loading pattern no longer emits either warning, including with SSR disabled.