optimize song list load

src/app/modules/songs/services/song-list.resolver.ts

@@ -0,0 +1,17 @@
+import {Injectable} from '@angular/core';
+import {Resolve} from '@angular/router';
+import {Observable} from 'rxjs';
+import {SongService} from './song.service';
+import {Song} from './song';
+import {filter} from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SongListResolver implements Resolve<Song[]> {
+  public constructor(private songService: SongService) {}
+
+  public resolve(): Observable<Song[]> {
+    return this.songService.list$().pipe(filter(_ => _.length > 0));
+  }
+}

src/app/modules/songs/song-list/song-list.component.ts

@@ -20,7 +20,10 @@ import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-sol
 export class SongListComponent implements OnInit, OnDestroy {
   public songs$: Observable<Song[]> | null = combineLatest([
     this.activatedRoute.queryParams.pipe(map(_ => _ as FilterValues)),
-    this.songService.list$().pipe(map(songs => songs.sort((a, b) => a.number - b.number))),
+    this.activatedRoute.data.pipe(
+      map(data => data.songList as Song[]),
+      map(songs => songs.sort((a, b) => a.number - b.number))
+    ),
   ]).pipe(
     map(_ => {
       const songs = _[1];

src/app/modules/songs/songs-routing.module.ts

@@ -5,11 +5,13 @@ import {SongListComponent} from './song-list/song-list.component';
 import {EditComponent} from './song/edit/edit.component';
 import {NewComponent} from './song/new/new.component';
 import {EditSongGuard} from './song/edit/edit-song.guard';
+import {SongListResolver} from './services/song-list.resolver';
 
 const routes: Routes = [
   {
     path: '',
     component: SongListComponent,
+    resolve: {songList: SongListResolver},
     pathMatch: 'full',
   },
   {