142 lines
6.4 KiB
Markdown
142 lines
6.4 KiB
Markdown
# 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`
|