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

[mlbonniec]

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: [email protected]
• 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

[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

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.

[danielroe]

Updated to use <NuxtLayout> rather than importing layout: https://codesandbox.io/s/naughty-silence-3eepsy - this seems to get rid of the blank flash you are reporting, both in sandbox and when cloned locally.

[mlbonniec]

Updated to use <NuxtLayout> rather than importing layout: https://codesandbox.io/s/naughty-silence-3eepsy - this seems to get rid of the blank flash you are reporting, both in sandbox and when cloned locally.

@danielroe the reason why I'm importing my layout, is that there's 3 slots inside this layout. So I've to use <template></template>. But using <NuxtLayout></NuxtLayout>, I didn't find any way of using multiple slots.

[danielroe]

You should be able to pass multiple slots to <NuxtLayout>: https://v3.nuxtjs.org/guide/directory-structure/layouts#overriding-a-layout-on-a-per-page-basis

[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

./src/layouts/main.vue

[mlbonniec]

Hi @danielroe ^^ I've just created a way better reproduction https://stackblitz.com/edit/nuxt-starter-n6o496?file=src/pages/second.vue.

The issue is when you navigate for the first time on a layout who is different than the current, and the page we're navigating contains a useFetch. After this first navigation, no white flash. However, if it's the same layout, there's no problem.

The layout seems to just not be loaded.

Here's a video in slow motion

[mlbonniec]

Hi, for your informations, this issue causes another one. When I want to navigate to an HTML anchor, using router.options.ts, the hash element isn't yet loaded, due to the layout issue. (I'm now on RC.8)

[mlbonniec]

Hi @danielroe, I'm sorry to bother you, but this issue is more and more annoying. My page are displaying their content after 0.5 ms. For your information, It's the same issue, on a new fresh project Do you know when I'll be fixed ? Because it's not present in RC.9 😕