Using Nuxt 3, I'm switching from my "login" layout to my "admin" layout.

This works great except for one thing: When switching layouts, there are few milliseconds where the "admin page content" can be seen displayed within the "login" layout. This means I can see my "Admin homepage" displayed in the previous "login" layout.

I can clearly see this desync in the devtools using the performance tab, very clearly when throttling the CPU.

This is espacially annoying because this produces content flashes.

No data fetching is involved. I do not use animations.

Why does this happen? How can I properly handle layout changing?

I tried the following code to handle the layout change to no avail:

preloadComponents(['admin']).then(() => {
          setPageLayout('admin');
          return navigateTo(this.localePath('/admin'));
        });

Here are snippets of the codebase:

app.vue

<template>
  <NuxtLayout :name="layoutName">
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">

function setLayout(fullPath: string) {
  switch (true) {
    case !!fullPath.match(/^\/\w{2}\/admin/g):
      layoutName.value = 'admin';
      break;
...
  }
}

watch(() => route.fullPath, setLayout, {immediate: true});

</script>

login.vue / admin.vue

<template>
  <div class="container-fluid px-0">
    <div>
      <div class="row">
         ...
      </div>
      <div class="container login-container">
        <slot></slot>
      </div>
    </div>
  </div>
</template>