story-research-zapwall/features/skeleton-loaders-toast-notifications.md

Skeleton Loaders et Toast Notifications

Auteur : Équipe 4NK Date : 2025-01-27

Objectif

Implémenter les deux premières améliorations UX de priorité haute :

1. Skeleton loaders - Remplacer les messages "Loading..." par des skeleton loaders
2. Toast notifications - Intégrer le système de toast pour les confirmations visuelles

Impacts

Skeleton loaders

• Expérience utilisateur : Amélioration de la perception de performance en affichant la structure du contenu pendant le chargement
• Cohérence visuelle : Remplacement des messages textuels par des éléments visuels cohérents avec le design system
• Feedback visuel : Animation subtile pour indiquer le chargement actif

Toast notifications

• Feedback utilisateur : Confirmations visuelles immédiates après les actions importantes
• Accessibilité : Toasts avec role="alert" et aria-live="polite" pour les screen readers
• Expérience utilisateur : Retour visuel clair et non intrusif pour les actions réussies

Modifications

Skeleton loaders

1. components/ArticlesList.tsx :

   • Ajout de ArticleCardSkeleton qui reproduit la structure d'une carte d'article
   • Remplacement de LoadingState par un affichage de 3 skeletons

2. components/AuthorsList.tsx :

   • Ajout de AuthorCardSkeleton qui reproduit la structure d'une carte d'auteur
   • Remplacement de LoadingState par un affichage de 4 skeletons en grille

3. components/UserArticlesList.tsx :

   • Ajout de ArticleCardSkeleton (identique à ArticlesList)
   • Remplacement de ArticlesLoading par un affichage de 3 skeletons
   • Ajout de l'import Skeleton

4. components/authorPage/AuthorPageContent.tsx :

   • Extraction de AuthorPageLoadingSkeleton, AuthorPageError, AuthorPageNotFound pour respecter max-lines-per-function
   • Remplacement du message de chargement par des skeletons représentant la structure de la page auteur

5. components/authorPresentationEditor/AuthorPresentationEditor.tsx :

   • Remplacement de LoadingNotice par des skeletons représentant la structure du formulaire
   • Ajout de l'import Skeleton

6. components/DocsContent.tsx :

   • Remplacement du message de chargement par des skeletons représentant la structure du contenu markdown
   • Suppression de l'import t non utilisé

7. components/FundingGauge.tsx :

   • Remplacement de FundingGaugeLoading par des skeletons représentant la structure du gauge
   • Ajout de l'import Skeleton

Toast notifications

1. components/ui/ToastContainer.tsx (nouveau) :

   • Création du système de gestion des toasts avec ToastProvider et useToast hook
   • Gestion d'une pile de toasts avec suppression automatique après durée configurable
   • Affichage des toasts en position fixe (top-right) avec z-index élevé

2. pages/_app.tsx :

   • Intégration du ToastProvider dans l'application pour rendre les toasts disponibles globalement

3. components/ArticleCard.tsx :

   • Ajout d'un toast de succès après déblocage réussi d'un article
   • Extraction de useArticleCardState pour respecter max-lines-per-function
   • Extraction de ArticleCardContent pour réduire le nombre de lignes de ArticleCard

4. components/ArticleEditor.tsx :

   • Ajout d'un toast de succès après publication réussie via useEffect
   • Extraction de usePublishSuccessToast pour respecter max-lines-per-function

5. components/PaymentModal.tsx :

   • Ajout d'un toast de succès après copie d'invoice dans copyInvoiceToClipboard
   • Ajout d'un toast de succès après initiation du paiement dans openWalletForInvoice
   • Mise à jour de usePaymentModalState pour accepter showToast optionnel

6. hooks/useArticlePayment.ts :

   • Refactoring pour accepter un objet de paramètres au lieu de paramètres individuels (respect de max-params)
   • Ajout du support showToast optionnel pour afficher des toasts après paiement réussi
   • Propagation de showToast à travers checkPaymentAndUnlock et startArticlePaymentFlow

7. locales/fr.txt et locales/en.txt :

   • Ajout des clés de traduction pour les toasts :
     • article.unlock.success : "Article débloqué avec succès!" / "Article unlocked successfully!"
     • article.publish.success : "Article publié avec succès!" / "Article published successfully!"
     • payment.modal.copySuccess : "Facture copiée dans le presse-papiers" / "Invoice copied to clipboard"
     • payment.modal.paymentInitiated : "Paiement initié avec succès" / "Payment initiated successfully"
   • Ajout des clés de traduction manquantes pour payment.modal.* déjà utilisées dans le code

Modalités de déploiement

1. Vérification :

   • npm run type-check : Aucune erreur TypeScript
   • npm run lint : Aucune erreur de linting (4 warnings acceptables sur l'utilisation de l'index dans les keys pour les skeletons)

2. Déploiement :

   • Utiliser les scripts de déploiement existants (deploy.sh, update-from-git.sh, update-remote-git.sh)
   • Validation explicite requise avant déploiement

Modalités d'analyse

1. Skeleton loaders :

   • Vérifier visuellement que les skeletons apparaissent pendant le chargement des listes
   • Vérifier que les animations de pulse sont fluides
   • Vérifier que les skeletons disparaissent correctement une fois les données chargées

2. Toast notifications :

   • Vérifier que les toasts apparaissent après :
     • Déblocage réussi d'un article
     • Publication réussie d'un article
     • Copie d'invoice dans le presse-papiers
     • Initiation du paiement avec Alby
   • Vérifier que les toasts disparaissent automatiquement après 5 secondes (2 secondes pour la copie)
   • Vérifier que les toasts peuvent être fermés manuellement via le bouton ×
   • Vérifier l'accessibilité avec un screen reader (toasts annoncés via aria-live="polite")

Pages affectées

• components/ArticlesList.tsx
• components/AuthorsList.tsx
• components/UserArticlesList.tsx
• components/authorPage/AuthorPageContent.tsx
• components/authorPresentationEditor/AuthorPresentationEditor.tsx
• components/DocsContent.tsx
• components/FundingGauge.tsx
• components/ui/ToastContainer.tsx (nouveau)
• components/ArticleCard.tsx
• components/ArticleEditor.tsx
• components/PaymentModal.tsx
• hooks/useArticlePayment.ts
• pages/_app.tsx
• locales/fr.txt
• locales/en.txt
• components/ui/index.ts
• docs/migration-status.md