fix: share in-flight preview requests per cache key

Author: JammingBen

packages/web-pkg/src/services/preview/previewService.ts

@@ -13,6 +13,9 @@ export class PreviewService {
   userStore: UserStore
   authStore: AuthStore
 
+  /** Ongoing preview requests, so concurrent loads of the same key share one fetch. */
+  private inFlightPreviews = new Map<string, Promise<string>>()
+
   constructor({
     clientService,
     userStore,
@@ -81,9 +84,15 @@ export class PreviewService {
     if (hit && hit.etag === resource.etag) {
       return hit.src
     }
+
     try {
-      const { src, size } = await this.fetchPreviewBlob(options, signal)
-      return cacheService.filePreview.set(key, { src, size, etag: resource.etag }, 0).src
+      let request = this.inFlightPreviews.get(key)
+      if (!request) {
+        request = this.fetchAndCachePreview(options, key, signal)
+        this.inFlightPreviews.set(key, request)
+      }
+
+      return await request
     } catch (e) {
       if (silenceErrors) {
         return
@@ -92,6 +101,19 @@ export class PreviewService {
     }
   }
 
+  private async fetchAndCachePreview(
+    options: LoadPreviewOptions,
+    key: string,
+    signal?: AbortSignal
+  ): Promise<string> {
+    try {
+      const { src, size } = await this.fetchPreviewBlob(options, signal)
+      return cacheService.filePreview.set(key, { src, size, etag: options.resource.etag }, 0).src
+    } finally {
+      this.inFlightPreviews.delete(key)
+    }
+  }
+
   private buildQueryString(options: BuildQueryStringOptions): string {
     return stringify({
       scalingup: options.scalingup || 0,