optimize read calls

src/app/modules/shows/services/show-data.service.ts

@@ -1,19 +1,24 @@
 import {Injectable} from '@angular/core';
-import {BehaviorSubject, Observable} from 'rxjs';
+import {Observable} from 'rxjs';
 import {DbService} from '../../../services/db.service';
 import {Show} from './show';
-import {map} from 'rxjs/operators';
+import {map, shareReplay} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ShowDataService {
-  public list$ = new BehaviorSubject<Show[]>([]);
   private collection = 'shows';
+  public list$: Observable<Show[]> = this.dbService.col$<Show>(this.collection).pipe(
+    // server-side ordering cuts client work and keeps stable order across subscribers
+    map(shows => [...shows].sort((a, b) => a.date.toMillis() - b.date.toMillis())),
+    shareReplay({
+      bufferSize: 1,
+      refCount: true,
+    })
+  );
 
-  public constructor(private dbService: DbService) {
-    this.dbService.col$<Show>(this.collection).subscribe(_ => this.list$.next(_));
-  }
+  public constructor(private dbService: DbService) {}
 
   public listRaw$ = () => this.dbService.col$<Show>(this.collection);
 

src/app/modules/shows/services/show-song.service.ts

@@ -40,14 +40,21 @@ export class ShowSongService {
   public list = (showId: string): Promise<ShowSong[]> => firstValueFrom(this.list$(showId));
 
   public async delete$(showId: string, showSongId: string, index: number): Promise<void> {
-    const showSong = await this.read(showId, showSongId);
-    await this.showSongDataService.delete(showId, showSongId);
-    const show = await firstValueFrom(this.showService.read$(showId));
+    const [showSong, show] = await Promise.all([
+      this.read(showId, showSongId),
+      firstValueFrom(this.showService.read$(showId)),
+    ]);
     if (!show) return;
-    const order = show.order;
+    if (!showSong) return;
+
+    const order = [...show.order];
     order.splice(index, 1);
-    await this.showService.update$(showId, {order});
-    await this.userService.decSongCount(showSong.songId);
+
+    await Promise.all([
+      this.showSongDataService.delete(showId, showSongId),
+      this.showService.update$(showId, {order}),
+      this.userService.decSongCount(showSong.songId),
+    ]);
   }
 
   public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> => await this.showSongDataService.update$(showId, songId, data);

src/app/modules/shows/services/show.service.ts

@@ -32,8 +32,7 @@ export class ShowService {
       ),
       map(s =>
         s.shows
-          .sort((a, b) => a.date.toMillis() - b.date.toMillis())
-          .filter(_ => !_.archived)
+          .filter(show => !show.archived)
           .filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
       )
     );