💄 improve UI when loading data

src/app/calculator/calculator.component.html

@@ -2,16 +2,25 @@
   <hs-panel-header name="adjuster" [title]="'CALCULATOR.panelHeader' | translate"></hs-panel-header>
   <div class="card-body">
     <div class="p-2 center-block">
+      <!-- FIELD & INDEX SELECTION PART -->
       <div>
         {{ 'CALCULATOR.selectIndex' | translate}}:&emsp;
         <select class="form-select" [(ngModel)]="data.selectedProduct">
           <option *ngFor="let product of calcService.availableProducts" [ngValue]="product">{{product}}</option>
         </select>
       </div>
-      <div class="center-block">
+      <div>
         <button type="button" class="btn btn-primary btn-lg" (click)="getDates()"
           [disabled]="noFieldSelected() || noProductSelected()">{{ 'CALCULATOR.getDates' | translate}}</button>
       </div>
+      <!-- LOADER -->
+      <div [hidden]="!calcService.datesLoading" aria-hidden="true">
+        <p class="card-text placeholder-glow">
+          <span class="placeholder col-6"></span>
+        </p>
+        <a href="#" tabindex="-1" class="btn btn-primary btn-lg disabled placeholder col-6"></a>
+      </div>
+      <!-- DATE SELECTION PART -->
       <div [hidden]="noDates()">
         {{ 'CALCULATOR.selectDate' | translate}}:&emsp;
         <select class="form-select" [(ngModel)]="calcService.selectedDate" (ngModelChange)="updateRangeSlider($event)">
@@ -20,7 +29,7 @@
         <!-- TODO: date-picker instead of select -->
         <fc-date-range-slider [values]="calcService.availableDates"></fc-date-range-slider>
       </div>
-      <div class="center-block">
+      <div [hidden]="noDates()">
         <button type="button" class="btn btn-primary btn-lg" (click)="getZones()"
           [disabled]="noDateSelected()">{{ 'CALCULATOR.getZones' | translate }}</button>
       </div>

src/app/calculator/calculator.service.ts

@@ -43,6 +43,8 @@ export class CalculatorService {
     ],
   };
   //[[[17.01403296191603, 49.24858329768389], [17.014029303734432, 49.24849340104692], [17.01389198448605, 49.2484957958039], [17.013754665219444, 49.24849819039773], [17.013751007554088, 49.248408293744056], [17.013613688518262, 49.24841068816722], [17.013476369464207, 49.24841308242727], [17.013469055184203, 49.248233289084894], [17.01333173660994, 49.24823568316671], [17.01319441801745, 49.24823807708539], [17.013183448228144, 49.24796838701452], [17.013320766073623, 49.24796599311847], [17.01331710926463, 49.247876096432506], [17.013729061944726, 49.24786891378824], [17.01373271950072, 49.24795881045155], [17.0138700372733, 49.24795641590298], [17.013873695096525, 49.24804631255717], [17.014285649051903, 49.24803912791008], [17.014281990481678, 49.247949231278554], [17.014419308181342, 49.247946836077475], [17.014422967000566, 49.24803673270145], [17.015246874309636, 49.24802235802403], [17.015384192130647, 49.24801996167353], [17.01540249521542, 49.24846944450495], [17.01526517614939, 49.248471840893245], [17.01526151574496, 49.24838194432262], [17.015124196909692, 49.24838434054022], [17.015127857065117, 49.248474237118394], [17.01457858054565, 49.248483820387705], [17.014582239723282, 49.248573716994485], [17.01403296191603, 49.24858329768389]]]};
+  private _datesLoading: boolean;
+  private _zonesLoading: boolean;
 
   constructor(
     private hsConfig: HsConfig,
@@ -77,6 +79,8 @@ export class CalculatorService {
    * Call 'get_dates' API method
    */
   async getDates({product}: {product: Index}) {
+    this.availableDates = undefined;
+    this._datesLoading = true;
     //TODO: temporary hard-coded hack
     this.selectedField = this.field;
     try {
@@ -91,6 +95,7 @@ export class CalculatorService {
             JSON.stringify(this.getCentroidOfField(this.selectedField))
         )
         .toPromise();
+      this._datesLoading = false;
       console.log('data received!');
       console.log(data);
       this.availableDates = data.dates;
@@ -99,6 +104,7 @@ export class CalculatorService {
        */
       this.selectedDate = undefined;
     } catch (err) {
+      this._datesLoading = false;
       console.error('Somethin fucked up!');
       console.log(err);
     }
@@ -115,10 +121,19 @@ export class CalculatorService {
     };
   }
 
+  get datesLoading() {
+    return this._datesLoading;
+  }
+
+  get zonesLoading() {
+    return this._zonesLoading;
+  }
+
   /**
    * Call 'get_zones' API method
    */
   async getZones({product}: {product: Index}) {
+    this._zonesLoading = true;
     //TODO: temporary hard-coded hack
     this.selectedField = this.fieldGeoJSON;
     try {
@@ -143,8 +158,10 @@ export class CalculatorService {
         .toPromise();
       console.log('data received!');
       console.log(data);
+      this._zonesLoading = false;
       this.zonesService.updateZones(data);
     } catch (err) {
+      this._zonesLoading = false;
       console.error('Somethin fucked up!');
       console.log(err);
     }