fix: wording and loader

src/app/annuaire/annuaire.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { UserAnnuary } from '../models/user.model';
 import { AuthService } from '../services/auth.service';
 import { SearchService } from '../structure-list/services/search.service';
@@ -18,6 +18,10 @@ export class AnnuaireComponent {
   public nextPage: number = 1;
   public filterActive: boolean = false;
 
+  ngOnInit(): void {
+    this.getUsers({ queryParam: '', page: 1, jobFilters: [], employerFilters: [] });
+  }
+
   public getUsers(params: SearchQuery): void {
     if (this.userIsLoggedIn()) {
       this.searchService.annuaireSearchQuery = params;

src/app/annuaire/result-list/result-list.component.html

@@ -47,7 +47,13 @@
 
 <div class="results unlogged" *ngIf="!isLogged">
   <img src="../../assets/ico/annuaire-unlogged.svg" alt="Illustration annuaire" />
-  <div class="users">{{ totalUserResult }} utilisateurs sont présents dans l'annuaire Rés'in</div>
+  <div class="users" [ngPlural]="totalUserResult">
+    <ng-template ngPluralCase="0">Aucun utilisateur n'est présent dans l'annuaire Rés'in</ng-template>
+    <ng-template ngPluralCase="1">1 utilisateur est présent dans l'annuaire Rés'in</ng-template>
+    <ng-template ngPluralCase="other"
+      >{{ totalUserResult }} utilisateurs sont présents dans l'annuaire Rés'in</ng-template
+    >
+  </div>
   <div class="access">
     Pour accéder à l’annuaire de Rés’in et contacter les utilisateurs,<br />
     veuillez vous connecter ou vous créer un compte.

src/app/structure-list/structure-list.component.html

@@ -29,6 +29,11 @@
       (hover)="handleCardHover($event)"
       class="structure-card"
     ></app-card>
-    <p *ngIf="structureList && structureList.length <= 0">Il n'y a aucune réponse correspondant à votre recherche</p>
+    <p *ngIf="structureList && structureList.length <= 0 && !isLoading">
+      Il n'y a aucune réponse correspondant à votre recherche
+    </p>
+    <div *ngIf="structureList && structureList.length <= 0 && isLoading" class="loader">
+      <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+    </div>
   </div>
 </div>

src/app/structure-list/structure-list.component.ts

@@ -23,6 +23,7 @@ export class StructureListComponent implements OnChanges, OnInit {
   public buttonTypeEnum = ButtonType;
   public structure: Structure;
   public printMode = false;
+  public isLoading = true;
 
   constructor(
     private route: ActivatedRoute,
@@ -62,6 +63,7 @@ export class StructureListComponent implements OnChanges, OnInit {
     }
     if (changes.structureList) {
       document.getElementById('listCard').scrollTo(0, 0);
+      this.isLoading = changes.structureList.firstChange;
     }
   }