💄 unify loader UI

src/app/calculator/calculator.component.html

@@ -2,7 +2,8 @@
   <hs-panel-header name="adjuster" [title]="'CALCULATOR.panelHeader' | translate">
     <extra-buttons>
       <!-- LOADER -->
-      <div class="spinner-border spinner spinner-sm mx-2" role="status" title="{{ 'CALCULATOR.loading' | translate }}..." *ngIf="calcService.lpisLoading">
+      <div class="spinner-border spinner spinner-sm mx-2" role="status"
+        title="{{ 'CALCULATOR.loading' | translate }}..." *ngIf="calcService.lpisLoading">
         <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
       </div>
     </extra-buttons>
@@ -32,12 +33,15 @@
         <p class="p-1 text-info">{{ 'CALCULATOR.selectMore' | translate}}</p>
       </div>
       <div>
-        {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectQuantiles', {quantileCount: calcService.quantileCount})}}:&emsp;
+        {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectQuantiles', {quantileCount:
+        calcService.quantileCount})}}:&emsp;
         <input type="range" min="2" max="10" step="1" [(ngModel)]="calcService.quantileCount">
       </div>
       <div>
-        {{ 'CALCULATOR.selectBlur' | translate}}:&emsp;{{calcService.blurValue}}&nbsp;px <span *ngIf="calcService.blurValue === 0">({{ 'CALCULATOR.blurNone' | translate}})</span>
-        <input type="range" min="{{calcService.BLUR_MIN_VALUE}}" max="{{calcService.BLUR_MAX_VALUE}}" step="1" [(ngModel)]="calcService.blurValue">
+        {{ 'CALCULATOR.selectBlur' | translate}}:&emsp;{{calcService.blurValue}}&nbsp;px <span
+          *ngIf="calcService.blurValue === 0">({{ 'CALCULATOR.blurNone' | translate}})</span>
+        <input type="range" min="{{calcService.BLUR_MIN_VALUE}}" max="{{calcService.BLUR_MAX_VALUE}}" step="1"
+          [(ngModel)]="calcService.blurValue">
       </div>
       <div>
         {{ 'CALCULATOR.selectIndex' | translate}}:&emsp;
@@ -45,16 +49,15 @@
           <option *ngFor="let product of calcService.AVAILABLE_PRODUCTS" [ngValue]="product">{{product}}</option>
         </select>
       </div>
-      <div>
-        <button type="button" class="btn btn-primary btn-lg" (click)="getDates()"
-          [disabled]="noFieldSelected() || noProductSelected()">{{ 'CALCULATOR.getDates' | translate}}</button>
-      </div>
-      <!-- LOADER -->
-      <div *ngIf="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 class="d-flex">
+        <div>
+          <button type="button" class="btn btn-primary btn-lg" (click)="getDates()"
+            [disabled]="noFieldSelected() || noProductSelected()">{{ 'CALCULATOR.getDates' | translate}}</button>
+        </div>
+        <!-- LOADER -->
+        <div class="spinner-border spinner mx-2" role="status" *ngIf="calcService.datesLoading" aria-hidden="true">
+          <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
+        </div>
       </div>
       <!-- DATE SELECTION PART -->
       <div [hidden]="noDates()">
@@ -66,10 +69,10 @@
         <fc-date-range-slider [values]="calcService.availableDates"></fc-date-range-slider>
       </div>
       <div class="d-flex" *ngIf="!noDates()">
-        <button type="button" class="btn btn-primary btn-lg" (click)="getZones()"
-          [disabled]="noDateSelected()">{{ 'CALCULATOR.getZones' | translate }}</button>
+        <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">
+        <div class="spinner-border spinner mx-2" role="status" *ngIf="calcService.zonesLoading" aria-hidden="true">
           <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
         </div>
       </div>