optimize song list load

.run/start.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="start" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json"/>
+    <command value="run"/>
+    <scripts>
+      <script value="start"/>
+    </scripts>
+    <node-interpreter value="project"/>
+    <envs/>
+    <method v="2"/>
+  </configuration>
+</component>

src/app/app.component.ts

@@ -21,7 +21,7 @@ export class AppComponent implements OnInit {
   public static hideLoader: () => void = () => document.querySelector('#load-bg')?.classList.add('hidden');
 
   public ngOnInit(): void {
-    setTimeout(() => AppComponent.hideLoader(), 2000);
+    setTimeout(() => AppComponent.hideLoader(), 1000);
   }
 
   public onScoll($event: {srcElement: {scrollTop: number}}): void {

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',
   },
   {