# 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`