Почему не работает suspense во Vue3 + Vite?

Question

[SM_ST]

Всем привет! НИкто не сталкивался с такой проблемой - suspense не отрабатывает пока рендерится список

<template>
  <div :class="$style.containerFluid">
    <div :class="[$style.pageHeader, $style.pageHeaderActions]">
      <PageTitle :title="'Тарифы'" />
      <router-link to="/tariffs/create" :class="[$style.btn, $style.btnPrimary]"
        >Добавить тариф</router-link
      >
    </div>
    <div :class="$style.row">
      <suspense>
        <template #default>
          <ul>
            <li v-for="(tariff, index) in tariffs" :key="index">
              {{ tariff.package.name }}
            </li>
          </ul>
        </template>
        <template #fallback>
          <SkeletonTariff :count="4" />
        </template>
      </suspense>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import UseTariff from "../../composables/useTariff";
import SkeletonTariff from "../../components/skeleton/tariff.vue";
import PageTitle from "../../components/common/page/Title.vue";

export default defineComponent({
  components: {
    SkeletonTariff,
    PageTitle,
  },
  setup() {
    const { tariffs, error, get } = UseTariff();

    get({ q: "vue" });

    return {
      tariffs,
      error,
    };
  },
});
</script>


<style lang="scss" module>
@import "@/assets/css/modules/grid.module.scss";
@import "@/assets/css/modules/button.module.scss";
@import "@/assets/css/modules/page.module.scss";
</style>

Answer 1

[Антон Антон]

Потому что suspense не для этого придуман, а для отображения плейсходлера, пока чанк с асинхронно подгружаемым компонентом грузится. Да и вообще это экспериментальная штука. Проще сделать переменную типа loading и отключать плейсхолдер по v-if