Why is suspense not working in Vue3 + Vite?

Question

Vue.js

Hello! Nobody faced such a problem - suspense does not work while the list is being rendered

<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

Because suspense was not invented for this, but for displaying a placeholder while a chunk with an asynchronously loaded component is loaded. And yes, it's experimental. It's easier to make a loading type variable and disable the placeholder by v-if