Updated avrop loading

apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.html

@@ -1,5 +1,5 @@
 <msfa-layout>
-  <section class="avrop" *ngIf="currentStep$ | async as currentStep; else: loadingRef">
+  <section class="avrop" *ngIf="currentStep$ | async as currentStep">
     <digi-typography>
       <header class="avrop__header">
         <h1>Nya deltagare</h1>
@@ -75,6 +75,7 @@
               [isSubmitted]="avropIsSubmitted$ | async"
               [handledare]="selectedHandledare$ | async"
               [handledareConfirmed]="handledareConfirmed$ | async"
+              [avropLoading]="avropLoading$ | async"
               (selectionChanged)="updateSelectedAvrop($event)"
               (paginated)="setNewPage($event)"
             ></msfa-avrop-list>
@@ -118,7 +119,7 @@
   </section>
 
   <ng-template #loadingRef>
-    <digi-icon-spinner class="msfa__spinner" af-title="Laddar innehåll"></digi-icon-spinner>
+    <msfa-loader></msfa-loader>
   </ng-template>
   <ng-template #noAvailabeHandledare>
     <!-- lägg in lämpligt innehåll -->

apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Avrop, AvropCompactData } from '@msfa-models/avrop.model';
 import { Handledare } from '@msfa-models/handledare.model';
-import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
 import { AvropService } from '@msfa-services/avrop.service';
+import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
 import { Observable } from 'rxjs';
 
 @Component({
@@ -25,6 +25,7 @@ export class AvropComponent {
   avropIsLocked$: Observable<boolean> = this.avropService.avropIsLocked$;
   handledareConfirmed$: Observable<boolean> = this.avropService.handledareIsConfirmed$;
   avropIsSubmitted$: Observable<boolean> = this.avropService.avropIsSubmitted$;
+  avropLoading$: Observable<boolean> = this.avropService.avropLoading$;
 
   constructor(private avropService: AvropService) {}
 

apps/mina-sidor-fa/src/app/pages/avrop/avrop.module.ts

@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
 import { AvropComponent } from './avrop.component';
 import { AvropFiltersModule } from './components/avrop-filters/avrop-filters.module';
 import { AvropListModule } from './components/avrop-list/avrop-list.module';
@@ -19,6 +20,7 @@ import { AvropListModule } from './components/avrop-list/avrop-list.module';
     AvropFiltersModule,
     DigiNgProgressProgressbarModule,
     DigiNgSkeletonBaseModule,
+    LoaderModule,
   ],
 })
 export class AvropModule {}

apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html

@@ -1,5 +1,5 @@
-<div class="avrop-filters">
+<div class="avrop-filters" *ngIf="filtersAreLoading$ | async; else loadingRef">
-  <div class="avrop-filters__filter-wrapper" *ngIf="availableTjanster$ | async; let availableTjanster; else loadingRef">
+  <div class="avrop-filters__filter-wrapper" *ngIf="availableTjanster$ | async as availableTjanster">
     <msfa-multiselect
       [multiselectTitle]="'Tjänster'"
       [availableOptions]="availableTjanster"
@@ -8,7 +8,10 @@
       (selectedOptionsChange)="updateSelectedTjanster($event)"
     ></msfa-multiselect>
   </div>
-  <div class="avrop-filters__filter-wrapper" *ngIf="availableUtforandeVerksamheter$ | async; let availableUtforandeVerksamheter; else loadingRef">
+  <div
+    class="avrop-filters__filter-wrapper"
+    *ngIf="availableUtforandeVerksamheter$ | async as availableUtforandeVerksamheter"
+  >
     <msfa-multiselect
       [multiselectTitle]="'Utförande verksamheter'"
       confirmButtonText="Uppdatera filter"
@@ -18,7 +21,7 @@
     ></msfa-multiselect>
   </div>
 
-  <div class="avrop-filters__filter-wrapper" *ngIf="availableKommuner$ | async; let availableKommuner; else loadingRef">
+  <div class="avrop-filters__filter-wrapper" *ngIf="availableKommuner$ | async as availableKommuner">
     <msfa-multiselect
       [multiselectTitle]="'Kommuner'"
       [availableOptions]="availableKommuner"
@@ -46,7 +49,5 @@
   </div>
 </div>
 <ng-template #loadingRef>
-  <div class="avrop-filters__loading-spinner">
+  <msfa-loader></msfa-loader>
-    <digi-icon-spinner af-title="Laddar innehåll"></digi-icon-spinner>
-  </div>
 </ng-template>

apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.ts

@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
 import { AvropService } from '@msfa-services/avrop.service';
-import { Observable } from 'rxjs';
+import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
+import { combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'msfa-avrop-filters',
@@ -19,6 +20,12 @@ export class AvropFiltersComponent {
     .filteredUtforandeVerksamheter$;
   filteredKommuner$: Observable<MultiselectFilterOption[]> = this.avropService.filteredKommuner$;
 
+  filtersAreLoading$: Observable<boolean> = combineLatest([
+    this.availableKommuner$,
+    this.availableTjanster$,
+    this.availableUtforandeVerksamheter$,
+  ]).pipe(map(([kommuner, tjanster, uv]) => !!(kommuner && tjanster && uv)));
+
   constructor(private avropService: AvropService) {}
 
   updateSelectedTjanster(filterOptions: MultiselectFilterOption[]): void {

apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts

@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { AvropFiltersComponent } from './avrop-filters.component';
+import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
 import { MultiselectModule } from '@msfa-shared/components/multiselect/multiselect.module';
+import { AvropFiltersComponent } from './avrop-filters.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [AvropFiltersComponent],
-  imports: [CommonModule, MultiselectModule],
+  imports: [CommonModule, MultiselectModule, LoaderModule],
   exports: [AvropFiltersComponent],
 })
 export class AvropFiltersModule {}

apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.component.html

@@ -1,4 +1,5 @@
-<div class="avrop-list">
+<digi-ng-skeleton-base *ngIf="avropLoading" [afCount]="3" afText="Laddar nya deltagare"></digi-ng-skeleton-base>
+<div *ngIf="availableAvrop?.length" class="avrop-list">
   <div class="avrop-list__select-all">
     <digi-form-checkbox
       *ngIf="!isLocked"

apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.component.ts

@@ -17,6 +17,7 @@ export class AvropListComponent {
   @Input() isLocked: boolean;
   @Input() isSubmitted: boolean;
   @Input() handledareConfirmed: boolean;
+  @Input() avropLoading: boolean;
   @Output() selectionChanged = new EventEmitter<AvropCompact[]>();
   @Output() paginated = new EventEmitter<number>();
 

apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.module.ts

@@ -1,3 +1,4 @@
+import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { AvropRowModule } from '../avrop-row/avrop-row.module';
@@ -6,7 +7,7 @@ import { AvropListComponent } from './avrop-list.component';
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [AvropListComponent],
-  imports: [CommonModule, AvropRowModule],
+  imports: [CommonModule, AvropRowModule, DigiNgSkeletonBaseModule],
   exports: [AvropListComponent],
 })
 export class AvropListModule {}

apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-panel/multiselect-panel.component.scss

@@ -104,7 +104,7 @@
     justify-content: center;
     align-items: center;
     background-color: var(--digi--ui--color--background--tertiary);
-    height: 70px;
+    padding: $digi--layout--gutter $digi--layout--gutter--l;
   }
 
   &__no-options-available {

apps/mina-sidor-fa/src/app/shared/services/avrop.service.ts

@@ -5,7 +5,7 @@ import { Handledare } from '@msfa-models/handledare.model';
 import { AvropApiService } from '@msfa-services/api/avrop-api.service';
 import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
-import { filter, map, switchMap } from 'rxjs/operators';
+import { filter, map, switchMap, tap } from 'rxjs/operators';
 
 type Step = 1 | 2 | 3 | 4;
 
@@ -24,6 +24,8 @@ export class AvropService {
   private _handledareIsConfirmed$ = new BehaviorSubject<boolean>(false);
   private _avropIsSubmitted$ = new BehaviorSubject<boolean>(false);
   private _error$ = new BehaviorSubject<string>(null);
+  private _avropLoading$ = new BehaviorSubject<boolean>(false);
+  public avropLoading$: Observable<boolean> = this._avropLoading$.asObservable();
 
   public filteredTjanster$: Observable<MultiselectFilterOption[]> = this._filteredTjanster$.asObservable();
   public filteredUtforandeVerksamheter$: Observable<
@@ -50,7 +52,16 @@ export class AvropService {
     this._filteredKommuner$,
     this._page$,
     this._limit$,
-  ]).pipe(switchMap(() => this.avropApiService.fetchAvrop$(this.filtersForAvrop)));
+  ]).pipe(
+    switchMap(() => {
+      this._avropLoading$.next(true);
+      return this.avropApiService.fetchAvrop$(this.filtersForAvrop).pipe(
+        tap(() => {
+          this._avropLoading$.next(false);
+        })
+      );
+    })
+  );
 
   public availableTjanster$: Observable<MultiselectFilterOption[]> = combineLatest([
     this._filteredUtforandeVerksamheter$,