💄 add spinner loader for LPIS WFS

src/app/app.service.ts

@@ -20,6 +20,7 @@ import {
 } from 'hslayers-ng';
 
 import i18n from './translations.json';
+import {CalculatorService} from './calculator/calculator.service';
 
 proj4.defs(
   'EPSG:3045',
@@ -35,6 +36,7 @@ register(proj4);
 export class AppService {
   sjtskProjection = getProjection('EPSG:5514');
   constructor(
+    public calcService: CalculatorService,
     public hsConfig: HsConfig,
     public hsEventBus: HsEventBusService,
     public hsLanguageService: HsLanguageService,
@@ -102,6 +104,19 @@ export class AppService {
       },
       strategy: bboxStrategy,
     });
+    lpisSource.on(
+      'featuresloadstart',
+      () => (this.calcService.lpisLoading = true)
+    );
+    lpisSource.on(
+      'featuresloadend',
+      () => (this.calcService.lpisLoading = false)
+    );
+    lpisSource.on('featuresloaderror', (evt) => {
+      this.calcService.lpisLoading = false;
+      console.warn('error when loading LPIS layer');
+      console.log(evt);
+    });
     /* Define and update the HsConfig configuration object */
     this.hsConfig.update({
       datasources: [

src/app/calculator/calculator.component.html

@@ -1,5 +1,12 @@
 <div [hidden]="!isVisible()" class="card mainpanel">
-  <hs-panel-header name="adjuster" [title]="'CALCULATOR.panelHeader' | translate"></hs-panel-header>
+  <hs-panel-header name="adjuster" [title]="'CALCULATOR.panelHeader' | translate">
+    <extra-buttons>
+      <!-- LOADER -->
+      <div class="spinner-border spinner spinner-sm mx-2" role="status" *ngIf="calcService.lpisLoading">
+        <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
+      </div>
+    </extra-buttons>
+  </hs-panel-header>
   <div class="card-body">
     <div class="p-2 center-block">
       <!-- FIELD & INDEX SELECTION PART -->

src/app/calculator/calculator.component.scss

@@ -8,3 +8,8 @@
     height: 3rem;
     color: #77bbff;
 }
+
+.spinner-sm {
+    width: 1rem;
+    height: 1rem;
+}

src/app/calculator/calculator.service.ts

@@ -18,6 +18,7 @@ export class CalculatorService {
   blurValue = 0.4;
   dateRangeSelects: Subject<{date: string}> = new Subject();
   dateCalendarSelects: Subject<{date: string}> = new Subject();
+  lpisLoading = false;
   quantileCount = 4;
   selectedDate;
   //selectedProduct;
@@ -34,7 +35,7 @@ export class CalculatorService {
       this.selectedDate = date;
     });
     /**
-     * When new field is selected, clean all other params
+     * When new field is selected, clear all other params
      */
     this.fieldService.fieldSelects.subscribe(() => {
       this.availableDates = undefined;