Vide, chargement et états d'erreur
Concevoir des états asynchrones clairs, cohérents et prêts à la production avec les primitives PyColors UI.
Vue d’ensembleLien vers la section
Les produits modernes passent une grande partie de leur vie en dehors du chemin du bonheur.
Charges de données. Les listes sont vides. Les demandes échouent. Les actions peuvent être retardées, rejetées, rejugées ou bloquées par des autorisations.
La façon dont votre produit gère ces moments affecte directement :
- Performance perçue
- Confiance des utilisateurs
- clarté du produit
- qualité globale du produit
Ce guide explique comment concevoir chargement, videet erreur avec PyColors UI primitives.
Pourquoi cela compte
Les utilisateurs ne se contentent pas de juger de l’état de réussite. Ils jugent également si le produit se sent stable lorsque les données sont manquantes, lentes ou indisponibles.
Ce que vous allez concevoirLien vers la section
États de chargement
États vides
États d'erreur
Modèle mentalLien vers la section
Le squelette est une forme. EmptyState est une explication. L’alerte est un problème.
Chaque état asynchrone a un travail:
| État | Composante | Signification |
|---|---|---|
| Chargement | Skeleton | Les données sont attendues bientôt |
| Vide | EmptyState | La demande a fonctionné, mais il n'y a rien à montrer |
| Erreur | Alert | Quelque chose a échoué et l'utilisateur a besoin de commentaires |
Règle du système
Ne floutez pas les états asynchrones. Un produit se sent plus clair lorsque chaque état communique une situation spécifique.
ÉtapesLien vers la section
Utiliser Skeleton pour le chargementLien vers la section
Utilisation Skeleton lorsque les données sont chargées et que la disposition finale est déjà connue.
Le squelette doit préserver la forme et réduire le décalage de mise en page. Cela ne devrait pas expliquer l’État.
import { Card, CardContent, Skeleton } from "@pycolors/ui";
export function ProjectCardSkeleton() {
return (
<Card className="rounded-2xl border-border/60">
<CardContent className="space-y-3 p-6">
<Skeleton className="h-5 w-1/3" />
<Skeleton className="h-4 w-2/3" />
<Skeleton className="h-24 w-full" />
</CardContent>
</Card>
);
}Utiliser EmptyState pour les résultats vides validesLien vers la section
Utilisation EmptyState lorsque la demande a réussi mais qu'il n'y a rien à afficher pour l'instant.
Un état vide devrait répondre à deux questions :
- Pourquoi est-ce vide ?
- Que peut faire l'utilisateur ensuite ?
import { Button, EmptyState } from "@pycolors/ui";
export function ProjectsEmptyState() {
return (
<EmptyState
title="No projects yet"
description="Create your first project to start organizing your workspace."
action={<Button>Create project</Button>}
/>
);
}Ce n'est pas un échec. C’est un véritable état de produit.
Utiliser l'alerte pour les erreursLien vers la section
Utilisation Alert lorsqu'une requête ou une action échoue et que l'utilisateur doit comprendre ce qui s'est passé.
import { Alert, AlertDescription, AlertTitle, Button } from "@pycolors/ui";
export function ProjectsErrorState() {
return (
<Alert variant="destructive">
<AlertTitle>Projects could not be loaded</AlertTitle>
<AlertDescription>Check your connection and try again.</AlertDescription>
<div className="mt-4">
<Button variant="outline">Retry</Button>
</div>
</Alert>
);
}La copie d'erreur doit être calme, spécifique et exploitable.
ExemplesLien vers la section
Guide de décisionLien vers la section
Utilisation Skeleton lorsque:
- Les données sont en cours de chargement
- La mise en page est prévisible
- Le contenu est attendu prochainement
- vous voulez éviter le décalage de mise en page
Utilisation EmptyState lorsque:
- La demande a réussi
- Le résultat est valide
- Il n'y a rien à afficher
- L’utilisateur a besoin d’une prochaine étape
Utilisation Alert lorsque:
- Une demande a échoué
- Une action a échoué
- L'utilisateur ne peut pas continuer
- le produit doit expliquer un problème de blocage
Préférez
- Squelette lorsque la disposition est connue
- EmptyState lorsque le résultat est valide mais vide
- Alerter quand l'utilisateur doit comprendre un échec
- Comportement asynchrone cohérent dans toutes les zones de produits
- Messagerie claire avec un rôle par état
Éviter
- Squelette combiné avec copie explicative
- EmptyState utilisé pour les erreurs réelles
- spinners globaux remplaçant les mises en page stables
- toasts pour bloquer les échecs de page
- mélange de plusieurs états asynchrones à la fois
Liste de contrôleLien vers la section
Avant d'expédier des états async, confirmez que :
- les états de chargement préservent la mise en page lorsque cela est possible
- Les états vides expliquent pourquoi rien n'est montré
- Les états vides offrent une action suivante utile le cas échéant.
- L'erreur explique ce qui s'est passé
- les défaillances de blocage sont visibles en ligne, non seulement dans un toast
- Les actions de réessai sont disponibles lorsque la récupération est possible
- copie reste calme, spécifique et humain
Prêt à utiliser ces états dans des flux de produits réels ?
Starter Pro vous offre des fondations SaaS adaptées à la production où les états
asynchrones sont importants : auth, facturation, routes protégés,
paramètres et tableaux de bord de produits. /docs/starter-pro