Vue router suspense triggers the first time but not the second time

so I followed the Vue docs and created a wrapper for the pages so that I can use top-level await. The first time the page is loaded, it works correctly and shows me the spinner. the second time I come back to the page from another page, the spinner is not shown. Instead, I stay on the page until the await call is done then I move to the next page. I was able to fix this by adding a key to the KeepAlive component, but idk if this affects performance or any behaviour, need advice.

<template>
  <div v-if="loadingStore.loading" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30">
    <VaProgressCircle v-if="loadingStore.loading" indeterminate size="10rem" thickness="0.2" />
  </div>
  <RouterView v-slot="{ Component, route }">
    <template v-if="Component">
      <Transition name="fade" mode="out-in">
        <KeepAlive :key="route.path">
          <Suspense>
            <component :is="layout">
              <component :is="Component" :key="route.path" />
            </component>
            <template #fallback>
              <SplashScreen />
            </template>
          </Suspense>
        </KeepAlive>
      </Transition>
    </template>
  </RouterView>
</template>