optimize firebase remote reads

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

@@ -107,7 +107,8 @@ export class RemoteComponent implements OnDestroy {
         this.showSongs = list;
         this.show = show;
         const order = show?.order ?? [];
-        this.presentationSongs = order.map(id => presentationSongs.find(f => f.id === id) ?? null).filter((s): s is PresentationSong => !!s);
+        const presentationSongsById = new Map(presentationSongs.map(song => [song.id, song] as const));
+        this.presentationSongs = order.map(id => presentationSongsById.get(id) ?? null).filter((s): s is PresentationSong => !!s);
         this.cRef.markForCheck();
       });
 

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

@@ -3,6 +3,7 @@ import {DbService} from '../../../services/db.service';
 import {Observable} from 'rxjs';
 import {ShowSong} from './show-song';
 import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
+import {shareReplay} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -10,10 +11,31 @@ import {QueryFn} from '@angular/fire/compat/firestore/interfaces';
 export class ShowSongDataService {
   private collection = 'shows';
   private subCollection = 'songs';
+  private listCache = new Map<string, Observable<ShowSong[]>>();
 
   public constructor(private dbService: DbService) {}
 
-  public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
+  public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => {
+    if (queryFn) {
+      return this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
+    }
+
+    const cached = this.listCache.get(showId);
+    if (cached) {
+      return cached;
+    }
+
+    const stream$ = this.dbService.col$<ShowSong>(`${this.collection}/${showId}/${this.subCollection}`).pipe(
+      shareReplay({
+        bufferSize: 1,
+        refCount: true,
+      })
+    );
+
+    this.listCache.set(showId, stream$);
+    return stream$;
+  };
+
   public read$ = (showId: string, songId: string): Observable<ShowSong | null> => this.dbService.doc$(`${this.collection}/${showId}/${this.subCollection}/${songId}`);
   public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> =>
     await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).update(data);