fix(carto): loader not displayed

src/app/carto/carto.component.html

@@ -7,6 +7,7 @@
       class="left-pane"
       fxLayout="column"
       [structureList]="structures"
+      [isLoading]="isLoadingStructures"
       [selectedStructureList]="structuresSelected"
       [isOrientation]="isOrientationForm"
       [location]="currentLocation"
@@ -14,7 +15,6 @@
       [ngClass]="{ mapPhone: isMapPhone === true }"
       (displayMapMarkerId)="setMapMarkerId($event)"
       (selectedMarkerId)="setSelectedMarkerId($event)"
-      (updatedStructure)="updateStructures($event)"
       (structureSelected)="selectStructure($event)"
     />
     <div class="btnSwitch">

src/app/carto/carto.component.ts

@@ -26,6 +26,7 @@ export class CartoComponent implements OnInit {
   @Output() structureSelection = new EventEmitter<any>();
 
   public structures: Structure[] = [];
+  public isLoadingStructures: boolean = true;
   public currentLocation: GeoJson;
   public displayMarkerId: string;
   public selectedMarkerId: string;
@@ -67,6 +68,7 @@ export class CartoComponent implements OnInit {
   }
 
   public getStructures(filters: Filter[]): void {
+    this.isLoadingStructures = true;
     const queryString = _.find(filters, { name: 'query' });
     if (queryString) {
       this.searchedValue = queryString.value;
@@ -78,14 +80,16 @@ export class CartoComponent implements OnInit {
             this.currentLocation.geometry.getLon(),
             this.currentLocation.geometry.getLat()
           );
+          this.isLoadingStructures = false;
         });
       } else {
         this.structureService.getStructures(filters).subscribe((structures) => {
           if (structures) {
             this.updateStructuresDistance(structures, this.userLongitude, this.userLatitude, false);
           } else {
-            this.structures = null;
+            this.structures = [];
           }
+          this.isLoadingStructures = false;
         });
       }
     } else {
@@ -94,18 +98,13 @@ export class CartoComponent implements OnInit {
         if (structures) {
           this.updateStructuresDistance(structures, this.userLongitude, this.userLatitude);
         } else {
-          this.structures = null;
+          this.structures = [];
         }
+        this.isLoadingStructures = false;
       });
     }
   }
 
-  public updateStructures(s: Structure): void {
-    this.structures = this.structures.map((structure) => {
-      return structure._id === s._id ? s : structure;
-    });
-  }
-
   /**
    * Update structure distance according to user actual position.
    * @param structures structures data to update

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

@@ -22,22 +22,24 @@
   </div>
 
   <div id="listCard" class="listCard" role="list" (mouseleave)="mouseLeave()">
-    <app-card
-      *ngFor="let structure of structureList"
-      class="structure-card"
-      role="listitem"
-      [structure]="structure"
-      [isOrientation]="isOrientation"
-      [isSelected]="isInPrintList(structure._id)"
-      (showDetails)="showDetails(structure)"
-      (keyup.enter)="showDetails(structure)"
-      (hover)="handleCardHover($event)"
-      (addToList)="addToList($event)"
-    />
-    <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">
+    <ng-container *ngIf="!isLoading">
+      <app-card
+        *ngFor="let structure of structureList"
+        class="structure-card"
+        role="listitem"
+        [structure]="structure"
+        [isOrientation]="isOrientation"
+        [isSelected]="isInPrintList(structure._id)"
+        (showDetails)="showDetails(structure)"
+        (keyup.enter)="showDetails(structure)"
+        (hover)="handleCardHover($event)"
+        (addToList)="addToList($event)"
+      />
+      <p *ngIf="structureList.length === 0" class="noStructureFound">
+        Il n'y a aucune réponse correspondant à votre recherche
+      </p>
+    </ng-container>
+    <div *ngIf="isLoading" class="loader">
       <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
     </div>
   </div>

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

@@ -21,7 +21,7 @@
   }
 }
 
-.listCard > p {
+.noStructureFound {
   margin-left: 1rem;
 }
 

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

@@ -15,18 +15,17 @@ import { PrintService } from '../shared/service/print.service';
 export class StructureListComponent implements OnChanges, OnInit {
   @Input() public isOrientation: boolean = false;
   @Input() public structureList: Structure[];
+  @Input() public isLoading = true;
   @Input() public location: GeoJson;
   @Input() public selectedStructure: Structure = new Structure();
   @Input() public selectedStructureList: Structure[] = [];
   @Output() public displayMapMarkerId: EventEmitter<string> = new EventEmitter<string>();
   @Output() public selectedMarkerId: EventEmitter<string> = new EventEmitter<string>();
-  @Output() public updatedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
   @Output() public structureSelected: EventEmitter<Structure[]> = new EventEmitter<Structure[]>();
 
   public buttonTypeEnum = ButtonType;
   public structure: Structure;
   public printMode = false;
-  public isLoading = true;
 
   constructor(
     private route: ActivatedRoute,
@@ -60,7 +59,6 @@ export class StructureListComponent implements OnChanges, OnInit {
     }
     if (changes.structureList) {
       document.getElementById('listCard').scrollTo(0, 0);
-      this.isLoading = changes.structureList.firstChange;
     }
   }