Documentation — Skeleton

À propos

Le module Skeleton fournit des assemblages de bpm.skeleton pour afficher un état de chargement réaliste d'une page complète (en-tête, métriques, cartes, tableau). Réutilisables tels quels ou à adapter à votre layout.

Composant bpm.skeleton

Props : variant (rectangular, circular, text), width, height, className, animated, shimmer, rounded.

# Affichage d'un chargement de page type dashboard
bpm.title("Chargement...")
# Puis assemblage de bpm.skeleton (header, métriques, contenu, tableau)

Guide d'usage

Quand préférer le skeleton au spinner ? Utilisez un skeleton lorsque la page a une structure identifiable (tableau, formulaire, article) : le placeholder reproduit cette structure et réduit la perception du temps d'attente. Utilisez un spinner pour des actions ponctuelles (soumission, chargement d'un détail en overlay).

Construire un skeleton fidèle à sa page : choisissez l'assemblage nommé correspondant (dashboard, list, article, form, detail, chart) et adaptez le nombre de lignes, colonnes ou métriques. Le simulateur permet de prévisualiser chaque assemblage avec des sliders pour les paramètres.

Transition vers le contenu : affichez le skeleton tant que loading === true, puis le contenu réel. Pour une transition fluide, appliquez transition: opacity 200ms ease-out sur le conteneur skeleton (classe bpm-skeleton-container) et passez à opacity: 0 avant de retirer le skeleton du DOM ou de le cacher.

Implémenter la transition : gardez le conteneur avec la classe bpm-skeleton-container (qui a déjà transition: opacity 200ms ease-out en global). Avant de démonter le skeleton, mettez opacity: 0 sur ce conteneur, attendez 200 ms, puis remplacez par le contenu réel ou supprimez le nœud.

Réduire les animations : le composant respecte prefers-reduced-motion (animation désactivée automatiquement). Vous pouvez aussi passer animated=false pour un skeleton statique (screenshots, tests).