Suspense component not showing in the page

Question

i'm trying make a loading for async component with nuxt but it is not showing up, why is that happening?

<script setup>

const { data: products } = await useFetch("https://fakestoreapi.com/products/");
</script>

<template>
    <Suspense>
      <template #default>
        <div
          class="min-h-screen grid grid-cols-4 gap-5 [&>*]:bg-gray-200 [&>*]:p-2 [&>*]:rounded-md"
        >
          <div v-for="product in products">
            <nuxt-link :to="`proudcts/${product.id}`">{{
              product.title
            }}</nuxt-link>
          </div>
        </div>
      </template>
      <!-- loading -->
      <template #fallback>
        <div class="text-4xl h-screen bg-blue-400 text-white">loading.</div>
      </template>
    </Suspense>
</template>