optimize song list load

src/app/modules/presentation/remote/remote.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
 import {combineLatest, Observable} from 'rxjs';
 import {PresentationBackground, Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
@@ -49,7 +49,8 @@ export class RemoteComponent {
     private showSongService: ShowSongService,
     private songService: SongService,
     private textRenderingService: TextRenderingService,
-    private globalSettingsService: GlobalSettingsService
+    private globalSettingsService: GlobalSettingsService,
+    private cRef: ChangeDetectorRef
   ) {
     this.shows$ = showService
       .list$(true)
@@ -81,6 +82,7 @@ export class RemoteComponent {
       .pipe(debounceTime(10))
       .subscribe(show => {
         this.show = show;
+        this.cRef.markForCheck();
       });
 
     combineLatest([this.showService.read$(change), this.showSongService.list$(change)])

src/app/modules/songs/services/song-data.service.ts

@@ -1,7 +1,8 @@
 import {Injectable} from '@angular/core';
 import {Song} from './song';
-import {Observable} from 'rxjs';
+import {BehaviorSubject, Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
+import {map} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -9,10 +10,14 @@ import {DbService} from '../../../services/db.service';
 export class SongDataService {
   private collection = 'songs';
 
-  public constructor(private dbService: DbService) {}
+  public constructor(private dbService: DbService) {
+    this.dbService.col$<Song>(this.collection).subscribe(_ => this.list$.next(_));
+  }
 
-  public list$ = (): Observable<Song[]> => this.dbService.col$(this.collection);
+  public list$ = new BehaviorSubject<Song[]>([]);
-  public read$ = (songId: string): Observable<Song | null> => this.dbService.doc$(this.collection + '/' + songId);
+  // public list$ = (): Observable<Song[]> => this.dbService.col$(this.collection);
+  //public read$ = (songId: string): Observable<Song | null> => this.dbService.doc$(this.collection + '/' + songId);
+  public read$ = (songId: string): Observable<Song | null> => this.list$.pipe(map(_ => _.find(s => s.id === songId) || null));
   public update$ = async (songId: string, data: Partial<Song>): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).update(data);
   public add = async (data: Partial<Song>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
   public delete = async (songId: string): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).delete();

src/app/modules/songs/services/song.service.ts

@@ -29,7 +29,7 @@ export class SongService {
     // importCCLI = (songs: Song[]) => this.updateFromCLI(songs);
   }
 
-  public list$ = (): Observable<Song[]> => this.songDataService.list$(); //.pipe(tap(_ => (this.list = _)));
+  public list$ = (): Observable<Song[]> => this.songDataService.list$; //.pipe(tap(_ => (this.list = _)));
   public read$ = (songId: string): Observable<Song | null> => this.songDataService.read$(songId);
   public read = (songId: string): Promise<Song | null> => firstValueFrom(this.read$(songId));
 

src/app/modules/songs/song-list/list-item/list-item.component.html

@@ -1,40 +0,0 @@
-<div class="list-item" *ngIf="song">
-  <div class="number">{{ song.number }}</div>
-  <div>{{ song.title }}</div>
-  <div>
-    <ng-container *appRole="['contributor']">
-      <span
-        *ngIf="song.status === 'draft' || !song.status"
-        class="warning"
-        matTooltip="Entwurf"
-        matTooltipPosition="before"
-      >
-        <fa-icon [icon]="faDraft"></fa-icon> &nbsp;
-      </span>
-      <span
-        *ngIf="song.status === 'set'"
-        class="neutral"
-        matTooltip="Entwurf"
-        matTooltipPosition="before"
-      >
-        <fa-icon [icon]="faDraft"></fa-icon> &nbsp;
-      </span>
-      <span
-        *ngIf="song.status === 'final'"
-        class="success"
-        matTooltip="Final"
-        matTooltipPosition="before"
-      >
-        <fa-icon [icon]="faFinal"></fa-icon> &nbsp;
-      </span>
-    </ng-container>
-    <span
-      *ngIf="song.legalType === 'open'"
-      class="warning"
-      matTooltip="rechtlicher Status ist ungeklärt"
-      matTooltipPosition="before"
-    ><fa-icon [icon]="faLegal"></fa-icon> &nbsp;</span
-    >
-  </div>
-  <div>{{ song.key }}</div>
-</div>

src/app/modules/songs/song-list/list-item/list-item.component.less

@@ -1,41 +0,0 @@
-@import "../../../../../styles/styles";
-
-.list-item {
-  padding: 5px 20px;
-  display: grid;
-  grid-template-columns: 50px auto 60px 30px;
-
-  & > div {
-    display: flex;
-    align-items: center;
-  }
-
-  cursor: pointer;
-
-  &:hover {
-    background: @primary-color;
-    color: #fff;
-
-    .warning {
-      color: #fff;
-    }
-  }
-}
-
-.number {
-  font-size: 18px;
-  font-weight: bold;
-  text-align: right;
-}
-
-.neutral {
-  color: #888;
-}
-
-.warning {
-  color: #ba3500;
-}
-
-.success {
-  color: #307501;
-}

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

@@ -1,26 +0,0 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
-
-import {ListItemComponent} from './list-item.component';
-
-describe('ListItemComponent', () => {
-  let component: ListItemComponent;
-  let fixture: ComponentFixture<ListItemComponent>;
-
-  beforeEach(
-    waitForAsync(() => {
-      void TestBed.configureTestingModule({
-        declarations: [ListItemComponent],
-      }).compileComponents();
-    })
-  );
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ListItemComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    void expect(component).toBeTruthy();
-  });
-});

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

@@ -1,15 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {Song} from '../../services/song';
-import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-solid-svg-icons';
-
-@Component({
-  selector: 'app-list-item',
-  templateUrl: './list-item.component.html',
-  styleUrls: ['./list-item.component.less'],
-})
-export class ListItemComponent {
-  @Input() public song: Song | null = null;
-  public faLegal = faBalanceScaleRight;
-  public faDraft = faPencilRuler;
-  public faFinal = faCheck;
-}

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

@@ -4,10 +4,19 @@
   </app-list-header>
 
   <app-card [padding]="false">
-    <app-list-item
+    <div *ngFor="let song of songs; trackBy: trackBy" [routerLink]="song.id" class="list-item">
-      *ngFor="let song of songs; trackBy: trackBy"
+      <div class="number">{{ song.number }}</div>
-      [routerLink]="song.id"
+      <div>{{ song.title }}</div>
-      [song]="song"
+      <div>
-    ></app-list-item>
+        <ng-container *appRole="['contributor']">
+          <div *ngIf="song.status === 'draft'" class="warning"><fa-icon [icon]="faDraft"></fa-icon></div>
+          <div *ngIf="song.status === 'set'" class="neutral"><fa-icon [icon]="faDraft"></fa-icon></div>
+          <div *ngIf="song.status === 'final'" class="success"><fa-icon [icon]="faFinal"></fa-icon></div>
+        </ng-container>
+        <div *ngIf="song.legalType === 'open'" class="warning" ><fa-icon [icon]="faLegal"></fa-icon></div>
+      </div>
+      <div>{{ song.key }}</div>
+    </div>
+
   </app-card>
 </div>

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

@@ -0,0 +1,45 @@
+@import "../../../../styles/styles";
+
+.list-item {
+  padding: 5px 20px;
+  display: grid;
+  grid-template-columns: 50px auto 50px 30px;
+
+  & > div {
+    display: flex;
+    align-items: center;
+  }
+
+  cursor: pointer;
+
+  &:hover {
+    background: @primary-color;
+    color: #fff;
+
+    .warning {
+      color: #fff;
+    }
+  }
+}
+
+.number {
+  font-size: 18px;
+  font-weight: bold;
+  text-align: right;
+}
+
+.neutral, .warning, .success {
+    width: 30px;
+}
+
+.neutral {
+  color: #888;
+}
+
+.warning {
+  color: #ba3500;
+}
+
+.success {
+  color: #307501;
+}

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

@@ -1,13 +1,14 @@
 import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
 import {SongService} from '../services/song.service';
 import {Song} from '../services/song';
-import {debounceTime, map} from 'rxjs/operators';
+import {map} from 'rxjs/operators';
 import {combineLatest, Observable} from 'rxjs';
 import {fade} from '../../../animations';
 import {ActivatedRoute} from '@angular/router';
 import {filterSong} from '../../../services/filter.helper';
 import {FilterValues} from './filter/filter-values';
 import {ScrollService} from '../../../services/scroll.service';
+import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-songs',
@@ -17,20 +18,10 @@ import {ScrollService} from '../../../services/scroll.service';
   animations: [fade],
 })
 export class SongListComponent implements OnInit, OnDestroy {
-  public songs$: Observable<Song[]> | null = null;
+  public songs$: Observable<Song[]> | null = combineLatest([
-  public anyFilterActive = false;
+    this.activatedRoute.queryParams.pipe(map(_ => _ as FilterValues)),
-
+    this.songService.list$().pipe(map(songs => songs.sort((a, b) => a.number - b.number))),
-  public constructor(private songService: SongService, private activatedRoute: ActivatedRoute, private scrollService: ScrollService) {}
+  ]).pipe(
-
-  public ngOnInit(): void {
-    const filter$ = this.activatedRoute.queryParams.pipe(
-      debounceTime(300),
-      map(_ => _ as FilterValues)
-    );
-
-    const songs$ = this.songService.list$().pipe(map(songs => songs.sort((a, b) => a.number - b.number)));
-
-    this.songs$ = combineLatest([filter$, songs$]).pipe(
     map(_ => {
       const songs = _[1];
       const filter = _[0];
@@ -38,7 +29,14 @@ export class SongListComponent implements OnInit, OnDestroy {
       return songs.filter(song => this.filter(song, filter));
     })
   );
+  public anyFilterActive = false;
+  public faLegal = faBalanceScaleRight;
+  public faDraft = faPencilRuler;
+  public faFinal = faCheck;
 
+  public constructor(private songService: SongService, private activatedRoute: ActivatedRoute, private scrollService: ScrollService) {}
+
+  public ngOnInit(): void {
     setTimeout(() => this.scrollService.restoreScrollPositionFor('songlist'), 100);
     setTimeout(() => this.scrollService.restoreScrollPositionFor('songlist'), 300);
   }
@@ -73,5 +71,6 @@ export class SongListComponent implements OnInit, OnDestroy {
 
     return flagStrings.indexOf(flag) !== -1;
   }
+
   public trackBy = (index: number, show: Song) => show.id;
 }

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

@@ -1,7 +1,6 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {SongListComponent} from './song-list.component';
-import {ListItemComponent} from './list-item/list-item.component';
 import {CardModule} from '../../../widget-modules/components/card/card.module';
 import {RouterModule} from '@angular/router';
 import {LegalTypeTranslatorModule} from '../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
@@ -18,7 +17,7 @@ import {RoleModule} from '../../../services/user/role.module';
 import {KeyTranslatorModule} from '../../../widget-modules/pipes/key-translator/key-translator.module';
 
 @NgModule({
-  declarations: [SongListComponent, ListItemComponent, FilterComponent],
+  declarations: [SongListComponent, FilterComponent],
   exports: [SongListComponent],
   imports: [
     CommonModule,