💄 add loader for zones request

src/app/calculator/calculator.component.html

@@ -32,7 +32,7 @@
           [disabled]="noFieldSelected() || noProductSelected()">{{ 'CALCULATOR.getDates' | translate}}</button>
       </div>
       <!-- LOADER -->
-      <div [hidden]="!calcService.datesLoading" aria-hidden="true">
+      <div *ngIf="calcService.datesLoading" aria-hidden="true">
         <p class="card-text placeholder-glow">
           <span class="placeholder col-6"></span>
         </p>
@@ -47,9 +47,13 @@
         <!-- TODO: date-picker instead of select -->
         <fc-date-range-slider [values]="calcService.availableDates"></fc-date-range-slider>
       </div>
-      <div [hidden]="noDates()">
+      <div class="d-flex" *ngIf="!noDates()">
         <button type="button" class="btn btn-primary btn-lg" (click)="getZones()"
           [disabled]="noDateSelected()">{{ 'CALCULATOR.getZones' | translate }}</button>
+        <!-- LOADER -->
+        <div class="spinner-border spinner mx-2" role="status" *ngIf="calcService.zonesLoading">
+          <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
+        </div>
       </div>
     </div>
   </div>

src/app/calculator/calculator.component.scss

@@ -0,0 +1,10 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/spinners";
+
+.spinner {
+    width: 3rem;
+    height: 3rem;
+    color: #77bbff;
+}

src/app/calculator/calculator.component.ts

@@ -13,6 +13,7 @@ import {FieldService} from './field.service';
 @Component({
   selector: 'calculator-panel',
   templateUrl: './calculator.component.html',
+  styleUrls: ['./calculator.component.scss'],
 })
 export class CalculatorComponent implements HsPanelComponent {
   data: {

src/app/translations.json

@@ -3,6 +3,7 @@
     "CALCULATOR": {
       "getDates": "VYBRAT DATUM",
       "getZones": "ZÍSKAT ZÓNY",
+      "loading": "Načítám",
       "panelHeader": "Výpočet indexů pole",
       "selectBlur": "Chci vyhlazení",
       "selectDate": "Chci datum",
@@ -16,6 +17,7 @@
     "CALCULATOR": {
       "getDates": "GET DATES",
       "getZones": "GET ZONES",
+      "loading": "Loading",
       "panelHeader": "Field calculation",
       "selectBlur": "I want to blur by",
       "selectDate": "I want a date",