Suspense not working with layouts in vue 3 - vue.js

Question

I have a view router with meta, where the layouts of each page are indicated. The problem is that suspense is triggered only once after a reboot. When switching to the same layout via router-link, it does not cause suspense. If you go through different layouts suspense works as it should. I can't figure out what the problem might be.
App.vue:
<script setup>
import {RouterView, useRoute, useRouter} from 'vue-router';
import {computed} from "vue";
import NotifiactionBlock from "./views/./components/blocks/NotifiactionBlock.vue";
import LoadSpinner from "./views/components/elements/spinners/LoadSpinner.vue";
const router = useRouter();
const route = useRoute();
const layout = computed(() => {
const {meta} = useRoute();
return meta.layout ?? 'default-layout';
});
</script>
<template>
<div>
<component :is="layout">
<RouterView v-slot="{ Component }">
<template v-if="Component">
<Transition name="page" mode="out-in">
<Suspense>
<component :is="Component"></component>
<template #fallback>
<load-spinner></load-spinner>
</template>
</Suspense>
</Transition>
</template>
</RouterView>
</component>
<NotifiactionBlock></NotifiactionBlock>
</div>
</template>
one of the pages (HomeView):
<template>
<div class="images-list">
<div class="header-block">
<h2>Recommended images for you</h2>
</div>
<images-list :images="store.images"></images-list>
</div>
</template>
<script async setup>
import ImagesList from "../components/blocks/ImagesList.vue";
import {useImageStore} from "../../stores/image";
import LoadSpinner from "../components/elements/spinners/LoadSpinner.vue";
const store = useImageStore();
await store.setRecommendedImages();
</script>
async method in HomeView from pinia:
async function setRecommendedImages() {
const response = await requestRecommendedImages();
images.value = response.data.data;
}
vue router:
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
linkActiveClass: 'active',
routes: [
{
path: '/',
name: 'home',
component: HomeView,
meta: {
layout: MainLayout,
}
},
{
path: '/images/:id',
name: 'image',
component: ImageView,
},
{
path: '/register',
name: 'register',
component: RegisterView,
meta: {
layout: AuthLayout,
}
},
{
path: '/login',
name: 'login',
component: LoginView,
meta: {
layout: AuthLayout,
}
},
{
path: '/liked',
name: 'liked',
component: LikedView,
meta: {
layout: MainLayout,
}
},
{
path: '/profile',
name: 'profile',
component: ProfileView,
meta: {
layout: DefaultLayout,
}
},
{
path: '/users/:id',
name: 'users',
component: UserView,
meta: {
layout: MainLayout,
}
},
{
path: '/top',
name: 'top',
component: TopView,
meta: {
layout: MainLayout,
}
}
]
})

Answer 1

Did you try to add timeout on Suspense ?
<RouterView v-slot="{ Component }">
<Suspense>
<component :is="layout">
<Suspense timeout="0">
<template #default>
<component :is="Component" />
</template>
<template #fallback>
<load-spinner></load-spinner>
</template>
</Suspense>
</component>
</Suspense>
</RouterView>