<!-- pages/ProduitDetail.vue — composant "async setup" : utilise top-level await -->
<script setup>
const props = defineProps({ id: String })

// await directement dans <script setup> : rend AUTOMATIQUEMENT ce composant asynchrone
const reponse = await fetch(`/api/produits/${props.id}`)
if (!reponse.ok) throw new Error('Produit introuvable')
const produit = await reponse.json()
</script>

<template>
  <article>
    <h1>{{ produit.nom }}</h1>
    <p>{{ produit.prix }} €</p>
  </article>
</template>

<!-- Composant parent : encadre le composant async avec Suspense -->
<script setup>
import { defineAsyncComponent } from 'vue'
import ProduitDetail from './pages/ProduitDetail.vue'
</script>

<template>
  <Suspense>
    <!-- slot par défaut : le contenu réel, une fois toutes les promesses résolues -->
    <template #default>
      <ProduitDetail id="42" />
    </template>

    <!-- slot fallback : affiché pendant le chargement -->
    <template #fallback>
      <p>Chargement du produit...</p>
    </template>
  </Suspense>
</template>

// defineAsyncComponent : chargement paresseux d'un composant ENTIER (code splitting),
// indépendamment de <Suspense>, avec sa propre gestion loading/error.
import { defineAsyncComponent } from 'vue'

const GraphiqueAvance = defineAsyncComponent({
  loader: () => import('./components/GraphiqueAvance.vue'),
  loadingComponent: () => import('./components/SpinnerChargement.vue'),
  errorComponent: () => import('./components/ErreurChargement.vue'),
  delay: 200,     // attend 200ms avant d'afficher loadingComponent (évite le flash sur réseau rapide)
  timeout: 10000, // bascule sur errorComponent si le chargement dépasse 10s
  onError(error, retry, fail, tentatives) {
    if (tentatives <= 3) {
      retry() // réessaie automatiquement jusqu'à 3 fois (utile sur réseau instable)
    } else {
      fail()
    }
  },
})

<!-- Gestion des erreurs de Suspense avec onErrorCaptured dans le parent -->
<script setup>
import { ref, onErrorCaptured } from 'vue'
import ProduitDetail from './pages/ProduitDetail.vue'

const erreur = ref(null)

onErrorCaptured((e) => {
  erreur.value = e
  return false // stoppe la propagation
})
</script>

<template>
  <p v-if="erreur">Une erreur est survenue : {{ erreur.message }}</p>
  <Suspense v-else>
    <template #default><ProduitDetail id="42" /></template>
    <template #fallback><p>Chargement...</p></template>
  </Suspense>
</template>

// Suspense imbriqué + plusieurs sources async en parallèle dans un composant
// (bonne pratique : Promise.all plutôt que des await séquentiels qui rallongent le chargement)
const [reponseProduit, reponseAvis] = await Promise.all([
  fetch(`/api/produits/${props.id}`),
  fetch(`/api/produits/${props.id}/avis`),
])
const produit = await reponseProduit.json()
const avis = await reponseAvis.json()