Afficher un Loading Spinner en Angular

L'affichage d'un spinner/loader joue un rôle crucial dans la gestion des attentes des utilisateurs et leur perception de la performance de l'application.

Il offre un retour visuel qui indique que l'application traite leur demande et les aide à patienter pendant les opérations qui prennent du temps.

Lors d'un chargement de données

Un chargement de données peut mettre du temps à cause du traitement côté serveur et de la quantité de données à charger. La durée du chargement peut aussi varier en fonction de la connexion de l'utilisateur.

Pour afficher un spinner lors du chargement des données, nous allons ajouter un attribut de type boolean qui nous permettra d'afficher le spinner.

Dans notre exemple nous chargeons une liste de tweets et nous ajoutons donc un boolean loadingTweets initialisé à true. Nous setterons ce boolean à false une fois les tweets chargés.

export class TweetComponent implements OnInit {

  loadingTweets = true
  tweets: Tweet[] = []

  constructor(private tweetService: TweetService) {}

  ngOnInit(): void {
    this.tweetService.getTweets().subscribe((tweets) => {
      this.tweets = tweets
      this.loadingTweets = false
    })
  }

Fichier tweet.component.ts

Il suffira ensuite dans le HTML d'afficher le spinner avec un ngIf simple.

<div class="text-center" *ngIf="loadingTweets">
  <div class="spinner-border"></div>
</div>
<div class="card mb-3" *ngFor="let tweet of tweets">
  <!-- ... -->
</div>

Fichier tweet.component.html

Voici le résultat lorsque l'utilisateur arrive sur la page :

Chargement des données avec un Spinner

Vous pouvez utiliser le spinner que vous voulez, ici j'utilise le spinner fournis par Bootstrap 5. Vous pouvez aussi juste afficher un texte "Loading..." ou "Chargement...".

Lors de la soumission d'un formulaire

Soumettre un formulaire implique généralement un appel à une API pour créer ou mettre à jour des données.

Cette opération peut mettre du temps et il est important de prévenir l'utilisateur que son formulaire est bien en train d'être traité.

Nous allons encore une fois nous baser sur un attribut de type boolean pour afficher le spinner. Il sera assigné à false par défaut.

Ce sera uniquement lors du submit du formulaire que nous allons le setter à true. Une fois que l'appel à l'API est terminé nous allons le resetter le boolean à false.

export class TweetComponent implements OnInit {
  form = new FormGroup(/*...*/)
  creatingTweet = false

  submitForm() {
    this.creatingTweet = true
    this.tweetService
      .createTweet(this.form.value.content)
      .subscribe((createdTweet) => {
        this.creatingTweet = false
      })
  }

Fichier tweet.component.ts

Il ne nous reste plus qu'à afficher le spinner au sein du bouton de type submit du formulaire.

<button type="submit" class="btn btn-primary">
  <ng-container *ngIf="!creatingTweet">Valider</ng-container>
  <span class="spinner-border spinner-border-sm"
        *ngIf="creatingTweet"
  ></span>
</button>

Fichier tweet.component.html

Spinner dans le bouton Submit

Éviter les soumissions de formulaire en double

Il arrive que l'utilisateur clique plusieurs fois sur le bouton Submit d'un formulaire et provoque des appels en double à votre API.

Le fait d'afficher un spinner va limiter ce comportement mais pas totalement. Nous devons, en plus du spinner, désactiver le bouton Submit pendant la soumission du formulaire.

Nous pouvons utiliser ce nouveau boolean creatingTweet, pour désactiver le bouton de validation afin d'éviter à l'utilisateur de faire des appels en double inutiles.

<button 
  type="submit" 
  class="btn btn-primary" 
  [disabled]="creatingTweet">
  <!-- ... -->
</button>

Spinner + Bouton désactivé

Gérer les erreurs avec RxJS

Il est important de faire disparaitre le spinner lorsqu'une erreur a eu lieu afin que l'utilisateur ne se retrouve pas bloqué.

En RxJS, il suffit d'implémenter la fonction error pour setter notre boolean à false.

this.tweetService.getTweets().subscribe({
  next: (tweets) => {
    this.tweets = tweets
    this.loadingTweets = false
  },
  error: () => {
    this.loadingTweets = false
  },
})

Conclusion

Vous avez appris comment afficher un spinner lors du chargement de vos données et lors de la soumission des formulaires de votre application.

Résultat final, Spinner pour le chargement des données et Spinner pour la soumission du formulaire.

N'oubliez pas d'optimiser les performances de votre application et de tester les différentes situations pour s'assurer que le spinner/loader s'affiche et disparaisse correctement.

En suivant ces conseils et en prêtant attention aux détails, vous améliorerez l'expérience utilisateur et renforcerez la confiance en votre application.

Si l'expérience de l'utilisateur est importante pour vous, il est important que vous rajoutiez un autre élément indispensable à votre application. De quoi je parle ? Allez voir cet article sur les Toasts.

Abonnez vous pour ne pas rater les nouveaux articles !