Ionic - 8.17 Afficher un spinner pendant la connexion
Une connexion prend du temps, et l'utilisateur doit savoir que l'application travaille. Cette leçon simule l'authentification avec un délai de 1,5 seconde. Elle affiche un ion-spinner pendant ce délai, à la place du bouton de connexion.
Simuler la connexion
En attendant la vraie logique d'authentification, la méthode de connexion est remplacée par un délai de 1,5 seconde. Lorsque l'utilisateur appuie sur le bouton, rien ne se passe pendant ce délai, puis l'application affiche la suite.
Il faudra ensuite remettre le vrai appel dans le service d'authentification.
Piloter le chargement avec une variable
Dans le fichier TypeScript de la page, on ajoute une propriété isLoading initialisée à false. Au début de la méthode de connexion, on la passe à true, puis la fin du délai la remet à false.
Cette variable indique si une opération est en cours.
Afficher le spinner à la place du bouton
Dans le HTML, ion-spinner s'affiche avec un type comme crescent, choisi dans la documentation d'Ionic. La directive *ngIf affiche le spinner lorsque isLoading est vrai, et le bouton lorsqu'il est faux.
Le spinner peut être centré dans une div ou aligné à droite, comme tout composant Ionic.
En résumé
La propriété isLoading contrôle l'affichage du spinner. Pendant la connexion, le spinner remplace le bouton, puis le bouton revient. Le délai simulé devra ensuite être remplacé par la vraie authentification.
Points clés
- Un délai simulé de 1,5 seconde remplace provisoirement l'authentification.
- La propriété isLoading passe à true au début de la connexion.
- isLoading repasse à false à la fin du délai.
- Le spinner s'affiche à la place du bouton grâce à *ngIf.
- Le spinner peut être centré ou aligné comme tout composant Ionic.
Questions fréquentes
Pourquoi afficher un spinner ?
Il indique à l'utilisateur qu'une action est en cours, ce qui rend l'attente plus agréable.
Quand faut-il remettre le vrai appel ?
Une fois la logique d'authentification prête, il faut remplacer le délai simulé dans le service.
Quelle est la prochaine étape ?
La leçon suivante utilise le contrôleur de chargement, une autre façon d'afficher un indicateur d'attente.