Toutes les ressources premium et membres pour 8,99 €/mois, en abonnement sans engagement. Voir les offres

PalateKit

Se connecter
Menu

Demander une ressource

Décrivez en une phrase la ressource qui vous manque. Nous vous écrirons quand elle sera publiée.

0 / 280

Une page, une vidéo ou une image en ligne.

Débloquer PalateKit

Tout débloquer

Offre

Le paiement vaut acceptation de nos conditions générales de vente.

Paiement sécurisé par Stripe. Reçus et factures envoyés par e-mail.

Content de vous revoir

Connectez-vous pour installer, télécharger ou sauvegarder cette ressource. Un compte gratuit suffit pour les ressources gratuites.

États de chargement et états vides v1.0.0

Utilisez cette ressource pour éviter les écrans blancs ou figés dans une interface web

Nouveau

  • 420 téléchargements
  • 178 mentions J'aime
  • 136 sauvegardes

Gratuit

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install loading-empty-states

Sans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.

Première fois : connectez la CLI avec

npx --yes palatekit@latest login

L'agent recense chaque endroit où l'interface attend ou peut être vide, choisit l'état adapté d'après la durée d'attente, puis l'implémente. Il traite aussi les quatre types d'états vides et l'accessibilité. Vous obtenez le code et un tableau d'audit.

Choisie surtout par

Mise à jour le 2 novembre 2026

Écran squelette d'une carte et état vide avec bouton d'action.

Caractéristiques

Fonctionne dans
Guides d'installation
Génère avec
Le modèle de votre agent
Licence
MIT

Ressources similaires

Tout voir

Ce que vous obtenez

  • SKILL.md, traduit en français : méthode, échelle de latence, règles et format d'audit
  • references/patterns.md : galerie de code pour squelettes, indicateurs, barres de progression et états vides

Pour qui

  • Une page qui reste blanche pendant le chargement
  • Choisir entre squelette et indicateur de chargement
  • Concevoir les écrans « aucun résultat » ou « première utilisation »

Pas pour qui

  • Accélérer réellement le chargement des pages
  • Concevoir des parcours complets de gestion d'erreurs
  • Une application sans code front à modifier

Étiquettes

  • chargement
  • squelette
  • état vide
  • ux
  • accessibilité

À propos

Vous dites

« Ma boutique affiche une page vide pendant que les produits se chargent. Audite les écrans et ajoute les bons états de chargement. »

Écran squelette d'une carte et état vide avec bouton d'action.

Skill publiée par sanky369 sous licence MIT, traduite par PalateKit.

Voir plus

Prérequis

À préparer
Un projet web existant avec des écrans qui chargent des données

Comment l'utiliser

  1. Ouvrez le projet web dans votre agent et décrivez le problème
  2. L'agent recense les écrans asynchrones et propose un état pour chacun
  3. Validez le tableau d'audit puis testez avec un réseau lent

Aperçu du contenu

Fichiers

  • LICENSE1 Ko
  • NOTICE-PALATEKIT.md0,5 Ko
  • references/patterns.md5,1 Ko
  • SKILL.md11,2 Ko

Origine et licence

Modifié par PalateKit

Auteur
sanky369
Source
github.com/sanky369/vibe-building-skills/tree/e9714d8decbc9a76eaab3bd85866117b8010e9bc/skills/frontend-design/loading-states
Licence
MIT

Notice

Version modifiée de « loading-states » (sanky369, MIT) : traduction française et fiche par PalateKit.

Avis des utilisateurs

–

Aucune note pour l'instant

Chargement des avis…

Supprimer votre avis ?

Votre note et votre commentaire seront retirés de la fiche.

Questions fréquentes

Cette skill dépend-elle d'autres skills ?

Elle en mentionne trois voisines pour aller plus loin (performance, erreurs, mouvement), mais fonctionne seule.

Quels frameworks sont couverts ?

La méthode est indépendante du framework ; les exemples de code sont en HTML et CSS, à adapter.