24-4 Gestion de l'état de chargement

Un autre élément que nous avons en quelque sorte ignoré jusqu'à maintenant est l'indication du chargement. Il est pratique courante de fournir à l'utilisateur une indication visuelle que l'application ou une composante est en train de charger des données. Autrement, sans indication, on ne sait pas s'il n'y a aucune donnée ou s'il y a eu une erreur.

Pour conserver l'état de chargement de la composante, on peut utiliser une propriété booléenne isLoading qu'on met à false par défaut et à true lorsque le chargement est terminé. On peut utiliser cette valeur pour ensuite contrôler l'affichage d'une indication visuelle de l'état dans la composante.

attention

Pour la suite, vous pouvez rétablir votre appel d'API afin qu'il soit fonctionnel et ne génère plus d'erreur!

Ajouter isLoading à la composante BaseComponent puisque nous en aurons besoin dans plusieurs composants.

src/app/shared/components/base-component.ts
export abstract class BaseComponent {
  msgErreur?: string;
  isLoading: boolean = false;
}

Utiliser la classe spinner-border (https://getbootstrap.com/docs/5.3/components/spinners/) de Bootstrap pour faire afficher une icône de chargement lorsque isLoading est à true.

src/app/features/projets/pages/projets-index.ts
<!-- ... -->

    <app-erreur [message]="msgErreur"></app-erreur>
    @if(isLoading) {
      <div class="spinner-border" role="status">
        <span class="visually-hidden">Chargement...</span>
      </div>
    }
    <app-projets-liste [projets]="projets" (projetDeleted)="gestionProjetDeleted($event)"></app-projets-liste>
  `,
  styles: ``
})

Activer isLoading avant de faire le ou les appels d'API et désactiver la propriété lorsque l'appel est terminé.

src/app/features/projets/pages/projets-index.ts
async ngOnInit(): Promise<void> {
  try {
    this.isLoading = true
    this.projets = await this.projetService.obtenirTous();
  } catch (error) {
    this.msgErreur = "Une erreur est survenue lors du chargement des projets."
  } finally {
    this.isLoading = false
  }
}

info

finally est utilisé puisqu'on veut désactiver le chargement dans tous les cas: que la requête ait été un succès ou non (erreur). En effet, même s'il y a eu une erreur, on affichera un message d'erreur et on ne veut pas que l'indicateur de chargement demeure affiché: le chargement est terminé, mais en erreur.

Tout comme le message d'erreur, il est possible d'encapsuler le composant de chargement dans un composant Chargement. Créez ce composant:
```
ng g component shared/components/chargement
```

Assignez une entrée (@Input()) pour l'état de chargement, en plus de mettre dans le template le div de chargement.

src/app/components/chargement.component.ts
@Component({
  selector: 'app-chargement',
  imports: [],
  template: `
    @if(isLoading) {
      <div class="spinner-border" role="status">
        <span class="visually-hidden">Chargement...</span>
      </div>
    }
  `,
  styles: ``
})
export class Chargement {
  @Input() isLoading: boolean = false;
}

Finalement, faites référence à app-chargement dans la ou les composantes où vous voulez afficher l'indicateur de chargement.

src/app/features/projets/pages/projets-index.ts
@Component({
  selector: 'app-projets-index',
  template: `
    <div class="row mb-3 mt-3">
      <div class="col-lg-9"><h1>Projets</h1></div>
      <div class="col-lg-3 d-flex align-items-center justify-content-end">
        <a class="btn btn-primary" routerLink="/projets/creer">Nouveau projet</a>
      </div>
    </div>
  <app-chargement [isLoading]="isLoading"></app-chargement>
  <app-erreur [message]="msgErreur"></app-erreur>
  <app-projets-liste [projets]="projets"></app-projets-liste>
  `,
  styles: [
  ]
})