Cannot use suspense with subpages - subpage leaves too soon

[chojnicki]

Someone is using Router + Suspense (vue 3), with nested (child) routes?
While switching between pages it works as expected, like in standard SSR - old page is kept until new (with fetched data) is resolved, then there is transition between, great. But if on old page there is nested another router-view (nested child pages), that nested page just disappears while changing root page, and I'm watching blank space until new page is ready :/ So nested Suspense is not "waiting" for root Suspense.

Any workaround? Hope I explained this clear enough. There is not much code to share, it looks like in docs https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components similar code both in root router view and in child router view.

<RouterView
    v-slot="{ Component }"
  >
    <template
      v-if="Component"
    >
      <transition
        enter-active-class="animate-fadeIn"
        leave-active-class="hidden"
        appear
      >
        <suspense
          @pending="handlePending()"
          @resolve="handleResolved()"
        >
          <component
            :is="Component"
            :key="key"
            v-bind="$attrs"
          />
          <template
            #fallback
          >
            <div
              class="w-full my-16 xl:my-32 2xl:my-64 flex justify-center"
            >
              <LoadingIndicator />
            </div>
          </template>
        </suspense>
      </transition>
    </template>
  </RouterView>

Edit: Here is reproduction https://stackblitz.com/edit/vitejs-vite-gg6kqo?file=src/pages/demo/demo1.vue
Just click on link to demo page, and then back to home page. Before home page is loaded, content of nested route in demo page disapears. I want to keep it, just like it is while switching between "home" and "about".

PS fallback is used only on init. In real app, my indicator that page is loading is nprogress.

Edit: Here is also question on stackoverflow https://stackoverflow.com/questions/76185240/suspense-in-vue-3-on-nested-routes-why-content-disappears

[719media]

I'm running into the same problem, using vue v3.4.5

[chojnicki]

You can use workaround with caching whole component/page.

https://stackoverflow.com/questions/76185240/suspense-in-vue-3-on-nested-routes-why-content-disappears

A spend a lot of time looking for "better" fix, but without luck. This one at least works and I already implemented it on production without another problems like performance loss.

At this point I personally consider this as a bug in Suspense feature.