@internetarchive/collection-browser 4.3.2-rc-webdev-8334.3 → 4.3.2-rc-webdev-8334.5

package/dist/test/tiles/tile-dispatcher.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-dispatcher.test.js","sourceRoot":"","sources":["../../../test/tiles/tile-dispatcher.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { aTimeout, expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport sinon from 'sinon';\nimport type { TileDispatcher } from '../../src/tiles/tile-dispatcher';\n\nimport '../../src/tiles/tile-dispatcher';\nimport type { ItemTile } from '../../src/tiles/grid/item-tile';\nimport { TileHoverPane } from '../../src/tiles/hover/tile-hover-pane';\nimport type { HoverPaneProperties } from '../../src/tiles/hover/hover-pane-controller';\n\ndescribe('Tile Dispatcher', () => {\n  it('should render item-tile for grid mode by default', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher\n        .tileDisplayMode=${'grid'}\n        .model=${{ mediatype: 'texts' }}\n      >\n      </tile-dispatcher>\n    `);\n\n    const itemTile = el.shadowRoot?.querySelector('item-tile');\n    expect(itemTile).to.exist;\n  });\n\n  it('should render collection-tile for grid mode and collection mediatype', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher\n        .tileDisplayMode=${'grid'}\n        .model=${{ mediatype: 'collection' }}\n      >\n      </tile-dispatcher>\n    `);\n\n    const collectionTile = el.shadowRoot?.querySelector('collection-tile');\n    expect(collectionTile).to.exist;\n  });\n\n  it('should render account-tile for grid mode and account mediatype', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher\n        .tileDisplayMode=${'grid'}\n        .model=${{ mediatype: 'account' }}\n      >\n      </tile-dispatcher>\n    `);\n\n    const accountTile = el.shadowRoot?.querySelector('account-tile');\n    expect(accountTile).to.exist;\n  });\n\n  it('should render search-tile for grid mode and search mediatype', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher\n        .tileDisplayMode=${'grid'}\n        .model=${{ mediatype: 'search' }}\n      >\n      </tile-dispatcher>\n    `);\n\n    const searchTile = el.shadowRoot?.querySelector('search-tile');\n    expect(searchTile).to.exist;\n  });\n\n  it('should render tile-list for extended list mode', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher .tileDisplayMode=${'list-detail'} .model=${{}}>\n      </tile-dispatcher>\n    `);\n\n    const listTile = el.shadowRoot?.querySelector('tile-list');\n    expect(listTile).to.exist;\n  });\n\n  it('should render tile-list-compact for compact list mode', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher .tileDisplayMode=${'list-compact'} .model=${{}}>\n      </tile-dispatcher>\n    `);\n\n    const compactListTile = el.shadowRoot?.querySelector('tile-list-compact');\n    expect(compactListTile).to.exist;\n  });\n\n  it('should open item in new tab when right-clicked in manage mode', async () => {\n    const oldWindowOpen = window.open;\n    const spy = sinon.spy();\n    window.open = spy;\n\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher\n        isManageView\n        .model=${{ identifier: 'foo', href: '/foo' }}\n        .baseNavigationUrl=${''}\n      >\n      </tile-dispatcher>\n    `);\n\n    const tileLink = el.shadowRoot?.querySelector(\n      'a[href]',\n    ) as HTMLAnchorElement;\n    expect(tileLink).to.exist;\n\n    tileLink.dispatchEvent(new Event('contextmenu'));\n    await el.updateComplete;\n\n    expect(spy.callCount).to.equal(1);\n    expect(spy.args[0][0]).to.equal('/foo');\n    expect(spy.args[0][1]).to.equal('_blank');\n\n    window.open = oldWindowOpen;\n  });\n\n  it('should toggle model checked state when manage check clicked', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher\n        isManageView\n        .model=${{ identifier: 'foo', href: '/foo' }}\n        .tileDisplayMode=${'grid'}\n      ></tile-dispatcher>\n    `);\n\n    const manageCheck = el.shadowRoot?.querySelector(\n      '.manage-check > input[type=\"checkbox\"]',\n    ) as HTMLButtonElement;\n\n    manageCheck.click();\n    await el.updateComplete;\n    expect(el.model?.checked).to.be.true;\n\n    manageCheck.click();\n    await el.updateComplete;\n    expect(el.model?.checked).to.be.false;\n  });\n\n  it('should return hover pane props', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher .model=${{ identifier: 'foo' }}> </tile-dispatcher>\n    `);\n\n    expect(el.getHoverPaneProps()).to.satisfy(\n      (props: HoverPaneProperties) => props?.model?.identifier === 'foo',\n    );\n  });\n\n  it('should focus the tile link when requested', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher .tileDisplayMode=${'grid'}> </tile-dispatcher>\n    `);\n\n    const tileLink = el.shadowRoot?.querySelector(\n      '.tile-link',\n    ) as HTMLAnchorElement;\n    expect(tileLink).to.exist;\n\n    const spyFocus = sinon.spy(tileLink, 'focus');\n    el.acquireFocus();\n    expect(spyFocus.callCount).to.equal(1);\n  });\n\n  it('should blur the tile link when requested', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher .tileDisplayMode=${'grid'}> </tile-dispatcher>\n    `);\n\n    const tileLink = el.shadowRoot?.querySelector(\n      '.tile-link',\n    ) as HTMLAnchorElement;\n    expect(tileLink).to.exist;\n\n    const spyBlur = sinon.spy(tileLink, 'blur');\n    el.releaseFocus();\n    expect(spyBlur.callCount).to.equal(1);\n  });\n\n  describe('Hover pane info button behavior', () => {\n    let oldMatchMedia: typeof window.matchMedia;\n\n    before(() => {\n      oldMatchMedia = window.matchMedia;\n      // Pretend that there is no hover-capable input device\n      window.matchMedia = () => ({ matches: false }) as MediaQueryList;\n    });\n\n    after(() => {\n      window.matchMedia = oldMatchMedia;\n    });\n\n    it('should toggle hover pane when tile info button is pressed', async () => {\n      const el = await fixture<TileDispatcher>(html`\n        <tile-dispatcher\n          .tileDisplayMode=${'grid'}\n          .model=${{ mediatype: 'texts' }}\n          .enableHoverPane=${true}\n        >\n        </tile-dispatcher>\n      `);\n\n      const itemTile = el.shadowRoot?.querySelector('item-tile') as ItemTile;\n      expect(itemTile).to.exist;\n\n      const infoButton = itemTile.shadowRoot?.querySelector(\n        '.info-button',\n      ) as HTMLButtonElement;\n      expect(infoButton).to.exist;\n\n      infoButton.click();\n      await aTimeout(500);\n      await el.updateComplete;\n      expect(el.getHoverPane()).to.be.instanceOf(TileHoverPane);\n\n      infoButton.click();\n      await aTimeout(500);\n      await el.updateComplete;\n      expect(el.getHoverPane()).not.to.exist;\n    });\n\n    it('should not show info button when hover pane is not enabled', async () => {\n      const el = await fixture<TileDispatcher>(html`\n        <tile-dispatcher\n          .tileDisplayMode=${'grid'}\n          .model=${{ mediatype: 'texts' }}\n          .enableHoverPane=${false}\n        >\n        </tile-dispatcher>\n      `);\n\n      const itemTile = el.shadowRoot?.querySelector('item-tile') as ItemTile;\n      expect(itemTile).to.exist;\n\n      const infoButton = itemTile.shadowRoot?.querySelector('.info-button');\n      expect(infoButton).to.not.exist;\n    });\n  });\n\n  describe('Accessibility', () => {\n    it('should have proper aria-label on tile link', async () => {\n      const el = await fixture<TileDispatcher>(html`\n        <tile-dispatcher\n          .tileDisplayMode=${'grid'}\n          .model=${{\n            title: 'Example Title',\n            mediatype: 'texts',\n          }}\n        >\n        </tile-dispatcher>\n      `);\n\n      const tileLink = el.shadowRoot?.querySelector(\n        '.tile-link',\n      ) as HTMLAnchorElement;\n      expect(tileLink).to.exist;\n      expect(tileLink.getAttribute('aria-label')).to.equal('Example Title');\n    });\n\n    it('should fallback to untitled aria-label on tile link when no title', async () => {\n      const el = await fixture<TileDispatcher>(html`\n        <tile-dispatcher\n          .tileDisplayMode=${'grid'}\n          .model=${{\n            mediatype: 'texts',\n          }}\n        >\n        </tile-dispatcher>\n      `);\n\n      const tileLink = el.shadowRoot?.querySelector(\n        '.tile-link',\n      ) as HTMLAnchorElement;\n      expect(tileLink).to.exist;\n      expect(tileLink.getAttribute('aria-label')).to.equal('Untitled item');\n    });\n\n    it('should have no accessibility violations in grid mode', async () => {\n      const el = await fixture<TileDispatcher>(html`\n        <tile-dispatcher\n          .tileDisplayMode=${'grid'}\n          .model=${{\n            title: 'Example Title',\n            mediatype: 'texts',\n          }}\n        >\n        </tile-dispatcher>\n      `);\n\n      await expect(el).to.be.accessible();\n    });\n\n    it('should have no accessibility violations in list mode', async () => {\n      const el = await fixture<TileDispatcher>(html`\n        <tile-dispatcher\n          .tileDisplayMode=${'list-detail'}\n          .model=${{ mediatype: 'texts' }}\n        >\n        </tile-dispatcher>\n      `);\n\n      await expect(el).to.be.accessible();\n    });\n  });\n});\n"]}
+{"version":3,"file":"tile-dispatcher.test.js","sourceRoot":"","sources":["../../../test/tiles/tile-dispatcher.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { aTimeout, expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport sinon from 'sinon';\nimport type { TileDispatcher } from '../../src/tiles/tile-dispatcher';\n\nimport '../../src/tiles/tile-dispatcher';\nimport type { ItemTile } from '../../src/tiles/grid/item-tile';\nimport { TileHoverPane } from '../../src/tiles/hover/tile-hover-pane';\nimport type { HoverPaneProperties } from '../../src/tiles/hover/hover-pane-controller';\n\ndescribe('Tile Dispatcher', () => {\n  it('should render item-tile for grid mode by default', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher\n        .tileDisplayMode=${'grid'}\n        .model=${{ mediatype: 'texts' }}\n      >\n      </tile-dispatcher>\n    `);\n\n    const itemTile = el.shadowRoot?.querySelector('item-tile');\n    expect(itemTile).to.exist;\n  });\n\n  it('should render collection-tile for grid mode and collection mediatype', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher\n        .tileDisplayMode=${'grid'}\n        .model=${{ mediatype: 'collection' }}\n      >\n      </tile-dispatcher>\n    `);\n\n    const collectionTile = el.shadowRoot?.querySelector('collection-tile');\n    expect(collectionTile).to.exist;\n  });\n\n  it('should render account-tile for grid mode and account mediatype', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher\n        .tileDisplayMode=${'grid'}\n        .model=${{ mediatype: 'account' }}\n      >\n      </tile-dispatcher>\n    `);\n\n    const accountTile = el.shadowRoot?.querySelector('account-tile');\n    expect(accountTile).to.exist;\n  });\n\n  it('should render search-tile for grid mode and search mediatype', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher\n        .tileDisplayMode=${'grid'}\n        .model=${{ mediatype: 'search' }}\n      >\n      </tile-dispatcher>\n    `);\n\n    const searchTile = el.shadowRoot?.querySelector('search-tile');\n    expect(searchTile).to.exist;\n  });\n\n  it('should render tile-list for extended list mode', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher .tileDisplayMode=${'list-detail'} .model=${{}}>\n      </tile-dispatcher>\n    `);\n\n    const listTile = el.shadowRoot?.querySelector('tile-list');\n    expect(listTile).to.exist;\n  });\n\n  it('should render tile-list-compact for compact list mode', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher .tileDisplayMode=${'list-compact'} .model=${{}}>\n      </tile-dispatcher>\n    `);\n\n    const compactListTile = el.shadowRoot?.querySelector('tile-list-compact');\n    expect(compactListTile).to.exist;\n  });\n\n  it('should open item in new tab when right-clicked in manage mode', async () => {\n    const oldWindowOpen = window.open;\n    const spy = sinon.spy();\n    window.open = spy;\n\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher\n        isManageView\n        .model=${{ identifier: 'foo', href: '/foo' }}\n        .baseNavigationUrl=${''}\n      >\n      </tile-dispatcher>\n    `);\n\n    const tileLink = el.shadowRoot?.querySelector(\n      'a[href]',\n    ) as HTMLAnchorElement;\n    expect(tileLink).to.exist;\n\n    tileLink.dispatchEvent(new Event('contextmenu'));\n    await el.updateComplete;\n\n    expect(spy.callCount).to.equal(1);\n    expect(spy.args[0][0]).to.equal('/foo');\n    expect(spy.args[0][1]).to.equal('_blank');\n\n    window.open = oldWindowOpen;\n  });\n\n  it('should use model href as link href', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher\n        .model=${{\n          identifier: 'foo',\n          href: 'https://web.archive.org/web/20180613065659/http://www.sankei.com/',\n        }}\n        .baseNavigationUrl=${''}\n      ></tile-dispatcher>\n    `);\n\n    const tileLink = el.shadowRoot?.querySelector(\n      'a[href]',\n    ) as HTMLAnchorElement;\n    expect(tileLink).to.exist;\n    expect(tileLink.getAttribute('href')).to.equal(\n      'https://web.archive.org/web/20180613065659/http://www.sankei.com/',\n    );\n  });\n\n  it('should toggle model checked state when manage check clicked', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher\n        isManageView\n        .model=${{ identifier: 'foo', href: '/foo' }}\n        .tileDisplayMode=${'grid'}\n      ></tile-dispatcher>\n    `);\n\n    const manageCheck = el.shadowRoot?.querySelector(\n      '.manage-check > input[type=\"checkbox\"]',\n    ) as HTMLButtonElement;\n\n    manageCheck.click();\n    await el.updateComplete;\n    expect(el.model?.checked).to.be.true;\n\n    manageCheck.click();\n    await el.updateComplete;\n    expect(el.model?.checked).to.be.false;\n  });\n\n  it('should return hover pane props', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher .model=${{ identifier: 'foo' }}> </tile-dispatcher>\n    `);\n\n    expect(el.getHoverPaneProps()).to.satisfy(\n      (props: HoverPaneProperties) => props?.model?.identifier === 'foo',\n    );\n  });\n\n  it('should focus the tile link when requested', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher .tileDisplayMode=${'grid'}> </tile-dispatcher>\n    `);\n\n    const tileLink = el.shadowRoot?.querySelector(\n      '.tile-link',\n    ) as HTMLAnchorElement;\n    expect(tileLink).to.exist;\n\n    const spyFocus = sinon.spy(tileLink, 'focus');\n    el.acquireFocus();\n    expect(spyFocus.callCount).to.equal(1);\n  });\n\n  it('should blur the tile link when requested', async () => {\n    const el = await fixture<TileDispatcher>(html`\n      <tile-dispatcher .tileDisplayMode=${'grid'}> </tile-dispatcher>\n    `);\n\n    const tileLink = el.shadowRoot?.querySelector(\n      '.tile-link',\n    ) as HTMLAnchorElement;\n    expect(tileLink).to.exist;\n\n    const spyBlur = sinon.spy(tileLink, 'blur');\n    el.releaseFocus();\n    expect(spyBlur.callCount).to.equal(1);\n  });\n\n  describe('Hover pane info button behavior', () => {\n    let oldMatchMedia: typeof window.matchMedia;\n\n    before(() => {\n      oldMatchMedia = window.matchMedia;\n      // Pretend that there is no hover-capable input device\n      window.matchMedia = () => ({ matches: false }) as MediaQueryList;\n    });\n\n    after(() => {\n      window.matchMedia = oldMatchMedia;\n    });\n\n    it('should toggle hover pane when tile info button is pressed', async () => {\n      const el = await fixture<TileDispatcher>(html`\n        <tile-dispatcher\n          .tileDisplayMode=${'grid'}\n          .model=${{ mediatype: 'texts' }}\n          .enableHoverPane=${true}\n        >\n        </tile-dispatcher>\n      `);\n\n      const itemTile = el.shadowRoot?.querySelector('item-tile') as ItemTile;\n      expect(itemTile).to.exist;\n\n      const infoButton = itemTile.shadowRoot?.querySelector(\n        '.info-button',\n      ) as HTMLButtonElement;\n      expect(infoButton).to.exist;\n\n      infoButton.click();\n      await aTimeout(500);\n      await el.updateComplete;\n      expect(el.getHoverPane()).to.be.instanceOf(TileHoverPane);\n\n      infoButton.click();\n      await aTimeout(500);\n      await el.updateComplete;\n      expect(el.getHoverPane()).not.to.exist;\n    });\n\n    it('should not show info button when hover pane is not enabled', async () => {\n      const el = await fixture<TileDispatcher>(html`\n        <tile-dispatcher\n          .tileDisplayMode=${'grid'}\n          .model=${{ mediatype: 'texts' }}\n          .enableHoverPane=${false}\n        >\n        </tile-dispatcher>\n      `);\n\n      const itemTile = el.shadowRoot?.querySelector('item-tile') as ItemTile;\n      expect(itemTile).to.exist;\n\n      const infoButton = itemTile.shadowRoot?.querySelector('.info-button');\n      expect(infoButton).to.not.exist;\n    });\n  });\n\n  describe('Accessibility', () => {\n    it('should have proper aria-label on tile link', async () => {\n      const el = await fixture<TileDispatcher>(html`\n        <tile-dispatcher\n          .tileDisplayMode=${'grid'}\n          .model=${{\n            title: 'Example Title',\n            mediatype: 'texts',\n          }}\n        >\n        </tile-dispatcher>\n      `);\n\n      const tileLink = el.shadowRoot?.querySelector(\n        '.tile-link',\n      ) as HTMLAnchorElement;\n      expect(tileLink).to.exist;\n      expect(tileLink.getAttribute('aria-label')).to.equal('Example Title');\n    });\n\n    it('should fallback to untitled aria-label on tile link when no title', async () => {\n      const el = await fixture<TileDispatcher>(html`\n        <tile-dispatcher\n          .tileDisplayMode=${'grid'}\n          .model=${{\n            mediatype: 'texts',\n          }}\n        >\n        </tile-dispatcher>\n      `);\n\n      const tileLink = el.shadowRoot?.querySelector(\n        '.tile-link',\n      ) as HTMLAnchorElement;\n      expect(tileLink).to.exist;\n      expect(tileLink.getAttribute('aria-label')).to.equal('Untitled item');\n    });\n\n    it('should have no accessibility violations in grid mode', async () => {\n      const el = await fixture<TileDispatcher>(html`\n        <tile-dispatcher\n          .tileDisplayMode=${'grid'}\n          .model=${{\n            title: 'Example Title',\n            mediatype: 'texts',\n          }}\n        >\n        </tile-dispatcher>\n      `);\n\n      await expect(el).to.be.accessible();\n    });\n\n    it('should have no accessibility violations in list mode', async () => {\n      const el = await fixture<TileDispatcher>(html`\n        <tile-dispatcher\n          .tileDisplayMode=${'list-detail'}\n          .model=${{ mediatype: 'texts' }}\n        >\n        </tile-dispatcher>\n      `);\n\n      await expect(el).to.be.accessible();\n    });\n  });\n});\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "4.3.2-rc-webdev-8334.3",
+  "version": "4.3.2-rc-webdev-8334.5",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -31,9 +31,9 @@
     "@internetarchive/histogram-date-range": "^1.4.2",
     "@internetarchive/ia-dropdown": "^2.0.0",
     "@internetarchive/iaux-item-metadata": "^1.0.5",
-    "@internetarchive/infinite-scroller": "^1.0.1",
+    "@internetarchive/infinite-scroller": "^2.0.0",
     "@internetarchive/modal-manager": "^2.0.5",
-    "@internetarchive/search-service": "2.7.2-rc-webdev-8334.1",
+    "@internetarchive/search-service": "2.7.2-rc-webdev-8334.2",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.12.2",
     "dompurify": "^3.2.4",

package/src/app-root.ts

@@ -112,6 +112,9 @@ export class AppRoot extends LitElement {
     const page = this.currentPage ?? 1;
     if (page > 1) {
       this.collectionBrowser.goToPage(page);
+    } else {
+      // Ensure we reset the initial page
+      this.collectionBrowser.initialPageNumber = 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
@@ -866,6 +916,8 @@ export class CollectionBrowser
       class=${this.infiniteScrollerClasses}
       itemCount=${this.placeholderType ? 0 : nothing}
       ariaLandmarkLabel="Search results"
+      .estimatedCellHeight=${this.estimatedTileHeight}
+      .minBufferMarginCells=${this.pageSize}
       .cellProvider=${this}
       .placeholderCellTemplate=${this.placeholderCellTemplate}
       @scrollThresholdReached=${this.scrollThresholdReached}
@@ -887,6 +939,25 @@ export class CollectionBrowser
     });
   }
 
+  /**
+   * Best-effort hint of how tall a single rendered tile is, by display mode.
+   * The scroller uses this to better estimate the size its initial scroll
+   * spacer and buffer position before real cell heights are measured.
+   * Should roughly match the placeholder heights since the initial render
+   * of a new page generally shows placeholders only anyway.
+   */
+  private get estimatedTileHeight(): number {
+    switch (this.displayMode) {
+      case 'list-detail':
+        return 80;
+      case 'list-compact':
+        return 45;
+      case 'grid':
+      default:
+        return 225;
+    }
+  }
+
   /**
    * Template for the sort & filtering bar that appears atop the search results.
    */
@@ -1098,7 +1169,7 @@ export class CollectionBrowser
     if ((this.currentPage ?? 1) > 1) {
       this.goToPage(1);
     }
-    this.currentPage = 1;
+    this.setCurrentPage(1);
   }
 
   /**
@@ -1871,6 +1942,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);
@@ -2123,27 +2199,45 @@ export class CollectionBrowser
   private visibleCellsChanged(
     e: CustomEvent<{ visibleCellIndices: number[] }>,
   ) {
+    this.updateVisiblePage(e.detail.visibleCellIndices);
+  }
+
+  /**
+   * Recomputes the current page from the given set of visible cell indices
+   * and emits `visiblePageChanged` if the page actually changed.
+   */
+  private updateVisiblePage(visibleCellIndices: number[]): void {
     if (this.isScrollingToCell) return;
-    const { visibleCellIndices } = e.detail;
     if (visibleCellIndices.length === 0) return;
 
+    // The indices aren't necessarily sorted, so sort them here to ensure our
+    // calculations below find the right cell/page.
+    const sorted = [...visibleCellIndices].sort((a, b) => a - b);
+
     // For page determination, do not count more than a single page of visible cells,
     // since otherwise patrons using very tall screens will be treated as one page
     // further than they actually are.
     const lastIndexWithinCurrentPage =
-      Math.min(this.pageSize, visibleCellIndices.length) - 1;
-    const lastVisibleCellIndex = visibleCellIndices[lastIndexWithinCurrentPage];
+      Math.min(this.pageSize, sorted.length) - 1;
+    const lastVisibleCellIndex = sorted[lastIndexWithinCurrentPage];
     const lastVisibleCellPage =
       Math.floor(lastVisibleCellIndex / this.pageSize) + 1;
-    if (this.currentPage !== lastVisibleCellPage) {
-      this.currentPage = lastVisibleCellPage;
-    }
-    const event = new CustomEvent('visiblePageChanged', {
-      detail: {
-        pageNumber: lastVisibleCellPage,
-      },
-    });
-    this.dispatchEvent(event);
+
+    this.setCurrentPage(lastVisibleCellPage);
+  }
+
+  /**
+   * Sets the current page number and emits a `visiblePageChanged`
+   * event if the new page differs from the previous one.
+   */
+  private setCurrentPage(pageNumber: number): void {
+    if (this.currentPage === pageNumber) return;
+    this.currentPage = pageNumber;
+    this.dispatchEvent(
+      new CustomEvent('visiblePageChanged', {
+        detail: { pageNumber },
+      }),
+    );
   }
 
   // we only want to scroll on the very first query change
@@ -2243,10 +2337,10 @@ export class CollectionBrowser
     this.selectedCreatorFilter = restorationState.selectedCreatorFilter ?? null;
     this.selectedFacets = restorationState.selectedFacets;
     if (!this.suppressURLQuery) this.baseQuery = restorationState.baseQuery;
-    this.currentPage = restorationState.currentPage ?? 1;
+    this.setCurrentPage(restorationState.currentPage ?? 1);
     this.minSelectedDate = restorationState.minSelectedDate;
     this.maxSelectedDate = restorationState.maxSelectedDate;
-    if (this.currentPage > 1) {
+    if (this.currentPage && this.currentPage > 1) {
       this.goToPage(this.currentPage);
     }
   }
@@ -2323,25 +2417,43 @@ export class CollectionBrowser
     });
   }
 
-  private scrollToPage(pageNumber: number): Promise<void> {
-    return new Promise(resolve => {
-      const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
-      // without this setTimeout, Safari just pauses until the `fetchPage` is complete
-      // then scrolls to the cell
-      setTimeout(() => {
-        this.isScrollingToCell = true;
-        this.infiniteScroller?.scrollToCell(cellIndexToScrollTo, true);
-        // This timeout is to give the scroll animation time to finish
-        // then updating the infinite scroller once we're done scrolling
-        // There's no scroll animation completion callback so we're
-        // giving it 0.5s to finish.
-        setTimeout(() => {
-          this.isScrollingToCell = false;
-          this.infiniteScroller?.refreshAllVisibleCells();
-          resolve();
-        }, 500);
-      }, 0);
+  private async scrollToPage(pageNumber: number): Promise<void> {
+    const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
+
+    // Wait for the infinite scroller be rendered before proceeding
+    let waitAttempts = 0;
+    while (!this.infiniteScroller && waitAttempts < 20) {
+      await this.updateComplete;
+      waitAttempts++;
+    }
+    if (!this.infiniteScroller) return;
+
+    // The scroller have its default `itemCount=0`, so propagate our estimated
+    // tile count before jumping to the desired page.
+    if (this.infiniteScroller.itemCount < this.estimatedTileCount) {
+      this.infiniteScroller.itemCount = this.estimatedTileCount;
+      await this.updateComplete;
+    }
+
+    // Without this setTimeout(0), Safari just pauses until the `fetchPage`
+    // is complete then scrolls to the cell.
+    await new Promise<void>(resolve => {
+      setTimeout(resolve, 0);
     });
+
+    this.isScrollingToCell = true;
+    const scrolled = await this.infiniteScroller.scrollToCell(
+      cellIndexToScrollTo,
+      true,
+    );
+    this.isScrollingToCell = false;
+    this.infiniteScroller.refreshAllVisibleCells();
+
+    // After we finish scrolling, recompute the visible page from the new state
+    // so that it doesn't fall out of sync.
+    if (scrolled) {
+      this.updateVisiblePage(this.infiniteScroller.getVisibleCellIndices());
+    }
   }
 
   /**

package/src/tiles/item-image.ts

@@ -1,4 +1,11 @@
-import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 
@@ -12,6 +19,14 @@ import { searchIcon } from '../assets/img/icons/mediatype/search';
 
 @customElement('item-image')
 export class ItemImage extends LitElement {
+  /**
+   * Map to cache which identifiers have waveform-style thumbnails, so that
+   * they can have their waveform styling applied immediately, rather than
+   * waiting for the image content to load before applying it (which can
+   * cause noticeable flicker when such tiles refresh).
+   */
+  private static readonly waveformByIdentifier = new Map<string, boolean>();
+
   @property({ type: Object }) model?: TileModel;
 
   @property({ type: String }) baseImageUrl?: string;
@@ -30,6 +45,15 @@ export class ItemImage extends LitElement {
 
   @query('img') private baseImage!: HTMLImageElement;
 
+  protected willUpdate(changed: PropertyValues): void {
+    if (changed.has('model')) {
+      // If this identifier is known to have a waveform image, then set isWaveform upfront
+      const identifier = this.model?.identifier;
+      this.isWaveform =
+        ItemImage.waveformByIdentifier.get(identifier as string) === true;
+    }
+  }
+
   render() {
     return html`
       <div class=${classMap(this.itemBaseClass)}>${this.imageTemplate}</div>
@@ -149,6 +173,9 @@ export class ItemImage extends LitElement {
       this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4
     ) {
       this.isWaveform = true;
+      if (this.model?.identifier) {
+        ItemImage.waveformByIdentifier.set(this.model.identifier, true);
+      }
     }
   }
 

package/src/tiles/tile-display-value-provider.ts

@@ -124,9 +124,8 @@ export class TileDisplayValueProvider {
       .toISOString()
       .replace(/[TZ:-]/g, '')
       .replace(/\..*/, '');
-    const captureHref = `https://web.archive.org/web/${captureDateStr}/${encodeURIComponent(
-      url,
-    )}`;
+    // url must not be percent-encoded — Wayback Machine matches on the raw URL
+    const captureHref = `https://web.archive.org/web/${captureDateStr}/${url}`;
     const captureText = formatDate(date, 'long');
 
     return html` <a href=${captureHref}> ${captureText} </a> `;

package/test/tiles/grid/item-tile.test.ts

@@ -453,7 +453,7 @@ describe('Item Tile', () => {
     const firstDateLink = captureDatesUl?.children[0]?.querySelector('a[href]');
     expect(firstDateLink, 'first date link').to.exist;
     expect(firstDateLink?.getAttribute('href')).to.equal(
-      'https://web.archive.org/web/20100102123456/https%3A%2F%2Fexample.com%2F',
+      'https://web.archive.org/web/20100102123456/https://example.com/',
     );
     expect(firstDateLink?.textContent?.trim()).to.equal('Jan 02, 2010');
 
@@ -461,7 +461,7 @@ describe('Item Tile', () => {
       captureDatesUl?.children[1]?.querySelector('a[href]');
     expect(secondDateLink, 'second date link').to.exist;
     expect(secondDateLink?.getAttribute('href')).to.equal(
-      'https://web.archive.org/web/20110203124321/https%3A%2F%2Fexample.com%2F',
+      'https://web.archive.org/web/20110203124321/https://example.com/',
     );
     expect(secondDateLink?.textContent?.trim()).to.equal('Feb 03, 2011');
   });

package/test/tiles/list/tile-list.test.ts

@@ -509,7 +509,7 @@ describe('List Tile', () => {
     const firstDateLink = captureDatesUl?.children[0]?.querySelector('a[href]');
     expect(firstDateLink, 'first date link').to.exist;
     expect(firstDateLink?.getAttribute('href')).to.equal(
-      'https://web.archive.org/web/20100102123456/https%3A%2F%2Fexample.com%2F',
+      'https://web.archive.org/web/20100102123456/https://example.com/',
     );
     expect(firstDateLink?.textContent?.trim()).to.equal('Jan 02, 2010');
 
@@ -517,7 +517,7 @@ describe('List Tile', () => {
       captureDatesUl?.children[1]?.querySelector('a[href]');
     expect(secondDateLink, 'second date link').to.exist;
     expect(secondDateLink?.getAttribute('href')).to.equal(
-      'https://web.archive.org/web/20110203124321/https%3A%2F%2Fexample.com%2F',
+      'https://web.archive.org/web/20110203124321/https://example.com/',
     );
     expect(secondDateLink?.textContent?.trim()).to.equal('Feb 03, 2011');
   });

package/test/tiles/tile-dispatcher.test.ts

@@ -110,6 +110,26 @@ describe('Tile Dispatcher', () => {
     window.open = oldWindowOpen;
   });
 
+  it('should use model href as link href', async () => {
+    const el = await fixture<TileDispatcher>(html`
+      <tile-dispatcher
+        .model=${{
+          identifier: 'foo',
+          href: 'https://web.archive.org/web/20180613065659/http://www.sankei.com/',
+        }}
+        .baseNavigationUrl=${''}
+      ></tile-dispatcher>
+    `);
+
+    const tileLink = el.shadowRoot?.querySelector(
+      'a[href]',
+    ) as HTMLAnchorElement;
+    expect(tileLink).to.exist;
+    expect(tileLink.getAttribute('href')).to.equal(
+      'https://web.archive.org/web/20180613065659/http://www.sankei.com/',
+    );
+  });
+
   it('should toggle model checked state when manage check clicked', async () => {
     const el = await fixture<TileDispatcher>(html`
       <tile-dispatcher