États de chargement ​

Référence commune pour les 4 états fondamentaux des pages avec données asynchrones.

Démo interactive ​

État initial — cliquez sur un bouton pour simuler

Grille de référence ​

ÉtatIndicateurMessageAction
idleAucunAucun—
loadingSpinner gradient brand (rotation)"Chargement en cours…"—
success✓ vertMessage de confirmationOptionnel (fermer, continuer)
error✕ rougeMessage d'erreurBouton "Réessayer"

Snippet — Pattern complet Vue ​

vue
<script setup>
import { ref } from 'vue'
const state = ref('idle')
const error = ref(null)
const rows = ref([])

const loadData = async () => {
  state.value = 'loading'
  try {
    rows.value = await fetchPartners()
    state.value = 'success'
  } catch (e) {
    error.value = e.message
    state.value = 'error'
  }
}
</script>

<template>
  <!-- État initial -->
  <div v-if="state === 'idle'" />

  <!-- Chargement -->
  <div v-else-if="state === 'loading'" style="padding: 48px; text-align: center;">
    <div class="bc-spinner" />
    <p style="color: var(--bc-sub); font-size: 14px;">Chargement en cours…</p>
  </div>

  <!-- Succès -->
  <div v-else-if="state === 'success'">
    <BcDataGrid :rows="rows" :columns="columns" />
  </div>

  <!-- Erreur -->
  <div v-else-if="state === 'error'" style="padding: 48px; text-align: center;">
    <p style="color: var(--bc-danger); font-weight: 600;">Erreur de chargement</p>
    <p style="color: var(--bc-sub); font-size: 13px;">{{ error }}</p>
    <bc-button variant="ghost" size="sm" @click="loadData">Réessayer</bc-button>
  </div>
</template>