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

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);
@@ -2143,7 +2198,13 @@ export class CollectionBrowser
   private visibleCellsChanged(
     e: CustomEvent<{ visibleCellIndices: number[] }>,
   ) {
-    if (this.isScrollingToCell) return;
+    if (this.isScrollingToCell) {
+      // eslint-disable-next-line no-console
+      console.log(
+        `[CB visibleCellsChanged] BAIL isScrollingToCell=true visible=[${e.detail.visibleCellIndices.join(',')}]`,
+      );
+      return;
+    }
     const { visibleCellIndices } = e.detail;
     if (visibleCellIndices.length === 0) return;
 
@@ -2155,6 +2216,20 @@ export class CollectionBrowser
     const lastVisibleCellIndex = visibleCellIndices[lastIndexWithinCurrentPage];
     const lastVisibleCellPage =
       Math.floor(lastVisibleCellIndex / this.pageSize) + 1;
+
+    // Detect out-of-order Set: compare the indices we got to a sorted copy.
+    const sorted = [...visibleCellIndices].sort((a, b) => a - b);
+    const isSorted = sorted.every((v, i) => v === visibleCellIndices[i]);
+    const minIdx = sorted[0];
+    const maxIdx = sorted[sorted.length - 1];
+    const first10 = visibleCellIndices.slice(0, 10).join(',');
+    const last10 = visibleCellIndices.slice(-10).join(',');
+
+    // eslint-disable-next-line no-console
+    console.log(
+      `[CB visibleCellsChanged] computedPage=${lastVisibleCellPage} lastIdx=${lastVisibleCellIndex} sampledAt=${lastIndexWithinCurrentPage} len=${visibleCellIndices.length} sorted=${isSorted} min=${minIdx} max=${maxIdx} scrollY=${window.scrollY} first10=[${first10}] last10=[${last10}]`,
+    );
+
     if (this.currentPage !== lastVisibleCellPage) {
       this.currentPage = lastVisibleCellPage;
     }
@@ -2345,6 +2420,10 @@ export class CollectionBrowser
 
   private async scrollToPage(pageNumber: number): Promise<void> {
     const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
+    // eslint-disable-next-line no-console
+    console.log(
+      `[CB scrollToPage] ENTRY page=${pageNumber} targetCell=${cellIndexToScrollTo} pagesToRender=${this.pagesToRender} estimatedTileCount=${this.estimatedTileCount} itemCount=${this.infiniteScroller?.itemCount} scrollY=${window.scrollY}`,
+    );
 
     // Wait for the infinite scroller be rendered before proceeding
     let waitAttempts = 0;
@@ -2352,7 +2431,13 @@ export class CollectionBrowser
       await this.updateComplete;
       waitAttempts++;
     }
-    if (!this.infiniteScroller) return;
+    if (!this.infiniteScroller) {
+      // eslint-disable-next-line no-console
+      console.log(
+        `[CB scrollToPage] NO_SCROLLER after wait waitAttempts=${waitAttempts}`,
+      );
+      return;
+    }
 
     // The scroller have its default `itemCount=0`, so propagate our estimated
     // tile count before jumping to the desired page.
@@ -2368,8 +2453,15 @@ export class CollectionBrowser
     });
 
     this.isScrollingToCell = true;
-    await this.infiniteScroller.scrollToCell(cellIndexToScrollTo, true);
+    const scrolled = await this.infiniteScroller.scrollToCell(
+      cellIndexToScrollTo,
+      true,
+    );
     this.isScrollingToCell = false;
+    // eslint-disable-next-line no-console
+    console.log(
+      `[CB scrollToPage] DONE page=${pageNumber} targetCell=${cellIndexToScrollTo} scrolled=${scrolled} scrollY=${window.scrollY}`,
+    );
     this.infiniteScroller.refreshAllVisibleCells();
   }