@internetarchive/collection-browser 4.3.2-alpha-webdev7939.0 → 4.3.2-alpha-webdev7939.1

package/src/collection-browser.ts

@@ -421,7 +421,7 @@ export class CollectionBrowser
     const model = this.dataSource.getTileModelAt(index);
     /**
      * If we encounter a model we don't have yet and we're not in the middle of an
-     * automated scroll, fetch the page and just return undefined.
+     * automated scroll, schedule a fetch for the missing page and return undefined.
      * The datasource will be updated once the page is loaded and the cell will be rendered.
      *
      * We disable it during the automated scroll since we don't want to fetch pages for intervening cells the
@@ -429,11 +429,61 @@ export class CollectionBrowser
      */
     if (!model && !this.isScrollingToCell && this.dataSource.queryInitialized) {
       const pageNumber = Math.floor(index / this.pageSize) + 1;
-      this.dataSource.fetchPage(pageNumber);
+      this.scheduleDeferredPageFetch(pageNumber);
     }
     return model;
   }
 
+  /**
+   * Debounce delay for page fetches initiated by new cells becoming visible.
+   * Tuned so quick scrolling through unloaded regions doesn't send rapid-fire
+   * search requests for every page we pass through, but to still feel responsive
+   * when the scroll ends.
+   */
+  private static readonly DEFERRED_FETCH_DELAY_MS = 150;
+
+  private deferredFetchTimer = 0;
+
+  /**
+   * Schedules a fetch for the given page, debounced to ensure we don't
+   * rapid-fire fetches while scrolling through pages quickly.
+   *
+   * If there's no pending fetch timer yet, it will fire a fetch immediately.
+   * Otherwise, it will reset any existing timer. In either case, a deferred
+   * fetch for the visible pages is scheduled after a brief delay to account
+   * for whatever pages we land on after scrolling.
+   */
+  private scheduleDeferredPageFetch(pageNumber: number): void {
+    if (!this.deferredFetchTimer) {
+      this.dataSource.fetchPage(pageNumber);
+    } else {
+      window.clearTimeout(this.deferredFetchTimer);
+    }
+
+    this.deferredFetchTimer = window.setTimeout(() => {
+      this.deferredFetchTimer = 0;
+      this.fetchVisiblePages();
+    }, CollectionBrowser.DEFERRED_FETCH_DELAY_MS);
+  }
+
+  /**
+   * Fetch each currently-visible page whose first cell still has no
+   * loaded model.
+   */
+  private fetchVisiblePages(): void {
+    const visibleIndices = this.infiniteScroller?.getVisibleCellIndices() ?? [];
+    const visiblePages = new Set(
+      visibleIndices.map(i => Math.floor(i / this.pageSize) + 1),
+    );
+
+    for (const page of visiblePages) {
+      const firstCellOfPage = (page - 1) * this.pageSize;
+      if (!this.dataSource.getTileModelAt(firstCellOfPage)) {
+        this.dataSource.fetchPage(page);
+      }
+    }
+  }
+
   // this is the total number of tiles we expect if
   // the data returned is a full page worth
   // this is useful for putting in placeholders for the expected number of tiles
@@ -1891,6 +1941,11 @@ export class CollectionBrowser
       window.removeEventListener('popstate', this.boundNavigationHandler);
     }
 
+    if (this.deferredFetchTimer) {
+      window.clearTimeout(this.deferredFetchTimer);
+      this.deferredFetchTimer = 0;
+    }
+
     this.leftColIntersectionObserver?.disconnect();
     this.facetsIntersectionObserver?.disconnect();
     window.removeEventListener('resize', this.updateLeftColumnHeight);