In my Nuxt 3 + Vuetify 3 app there are two layouts: default and auth.

   `// app.vue
    <template>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </template>

    // layout/default.vue 
    <script setup lang="ts">
      const isLayoutReady = ref(false);
      onMounted(() => {
        isLayoutReady.value = true;
      });
    </script>

    <template>
      <v-app class="default-layout">
        <v-app-bar>...</v-app-bar>
        <Sidebar v-if="isTabletOrDesktop" />
        <v-main>
          <v-container fluid>
            <div v-if="isLayoutReady">
              <slot />
            </div>
          </v-container>
        </v-main>
      </v-app>
    </template>

    // layout/auth.vue 
    <template>
      <v-app>
        <v-main>
          <v-row fluid class="auth-layout ma-0 pa-0">
            <v-col cols="12" md="6" class="auth-layout__context">
              <slot />
            </v-col>
          </v-row>
        </main>
      </v-app>
    </template> 

    // pages/transactions/index.vue
     <script setup lang="ts">
      definePageMeta({
        layout: 'default',
      });
     </script>

     <template>
      <div class="transactions">...</div>
     </template>  

    // pages/login.vue
     <script setup lang="ts">
       definePageMeta({
         layout: 'auth',
       }); 
     </script>

     <template>
       <v-card class="login mx-auto pa-5" elevation="0">...</v-card>
     </template>
`

When I navigate from the login page to the transactions page, the main context from the main tag is first displayed on the screen, and then the default layout is displayed. As a result, the header and sidebar overlap the main context.

Adding conditional rendering using the “isLayoutReady” variable does not solve the problem.
How can I set the default layout to be displayed first and then the main context, or both at the same time?