Quick blank page appear when navigating to a different layout in a page using useFetch

Environment

Nuxt CLI v3.0.0-rc.6 00:26:03 Nuxt project info: 00:26:05

---

• Operating System: Darwin
• Node Version: v18.6.0
• Nuxt Version: 3.0.0-rc.6
• Package Manager: npm@8.13.2
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

This bug is not visible on Sandboxes, because all pages navigation are already displaying quick blank page. Try to clone the reproduction on your computer 😅 https://codesandbox.io/s/shy-https-f2u380?file=/pages/pages/index.vue

Describe the bug

When navigating on pages that contains a layout, which also contains a layout, the page display an entire blank page for a quick time. As you can see on the reproduction link, all my index.vue pages are using a main layout, who uses the default layout.
Try to navigate from /pages/other to /pages/ or / by using links present on pages, and you’ll normally see the white page for a few time.

Maybe this issue is not only related to layouts, but on my main website, I’ve got this blank page only on navigating on / route, which is the only one implementing nested layouts.

Additional context

I’ve checked #4624, but unfortunately, my / page contains a single root element.
After more investigation, it’s possible that this issue occurs when setting definePageMeta({ layout: false }); and use MyNestedLayout instead as a wrapper component, to allow usage of multiple (named) slots in layout

Logs

No response

[mlbonniec]

You’re right, I’m able to use multiple slots, sorry for that ^^ However, I still have blank flash 😬
@procrates could you try the solution that proposed Daniel and keep us informed if it solved the issue for you ?

Here’s how I setup layouts ./src/pages/index.vue

<div align="center"> </div>

./src/layouts/main.vue

<div align="center"> </div>

[procrates]

It is not only you. I am using nested layouts explicitly to display dynamic content on the layout based on the page. Only way to do that is to wrap the page in <NuxtLayout name="layout"> with <template> tags.

This causes the a momentarily blank screen when navigating. It dosnt feel right since it is supposed to be a PWA.

Thanks for figuring this out.