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

package/dist/src/collection-browser.js

@@ -1,3 +1,4 @@
+var CollectionBrowser_1;
 import { __decorate } from "tslib";
 import { html, css, LitElement, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
@@ -24,6 +25,7 @@ import './collection-facets';
 import './circular-activity-indicator';
 import './collection-facets/smart-facets/smart-facet-bar';
 let CollectionBrowser = class CollectionBrowser extends LitElement {
+    static { CollectionBrowser_1 = this; }
     constructor() {
         super();
         this.baseImageUrl = 'https://archive.org';
@@ -188,6 +190,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          */
         this.dataSourceInstallInProgress = false;
         this.placeholderCellTemplate = html `<collection-browser-loading-tile></collection-browser-loading-tile>`;
+        this.deferredFetchTimer = 0;
         /**
          * Updates the height of the left column according to its position on the page.
          * Arrow function ensures proper `this` binding.
@@ -225,7 +228,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         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
@@ -233,10 +236,52 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          */
         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.
+     */
+    static { this.DEFERRED_FETCH_DELAY_MS = 150; }
+    /**
+     * 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.
+     */
+    scheduleDeferredPageFetch(pageNumber) {
+        if (!this.deferredFetchTimer) {
+            this.dataSource.fetchPage(pageNumber);
+        }
+        else {
+            window.clearTimeout(this.deferredFetchTimer);
+        }
+        this.deferredFetchTimer = window.setTimeout(() => {
+            this.deferredFetchTimer = 0;
+            this.fetchVisiblePages();
+        }, CollectionBrowser_1.DEFERRED_FETCH_DELAY_MS);
+    }
+    /**
+     * Fetch each currently-visible page whose first cell still has no
+     * loaded model.
+     */
+    fetchVisiblePages() {
+        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
@@ -406,32 +451,32 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
     }
     render() {
-        return html `
+        return html `
       ${this.showSmartFacetBar && this.placeholderType === null
-            ? html `<smart-facet-bar
-            .query=${this.baseQuery}
-            .aggregations=${this.dataSource.aggregations}
-            .selectedFacets=${this.selectedFacets}
-            .collectionTitles=${this.dataSource.collectionTitles}
-            .filterToggleShown=${!this.mobileView}
-            .filterToggleActive=${this.facetPaneVisible}
-            .label=${this.smartFacetBarLabel}
-            @facetsChanged=${this.facetsChanged}
+            ? html `<smart-facet-bar
+            .query=${this.baseQuery}
+            .aggregations=${this.dataSource.aggregations}
+            .selectedFacets=${this.selectedFacets}
+            .collectionTitles=${this.dataSource.collectionTitles}
+            .filterToggleShown=${!this.mobileView}
+            .filterToggleActive=${this.facetPaneVisible}
+            .label=${this.smartFacetBarLabel}
+            @facetsChanged=${this.facetsChanged}
             @filtersToggled=${() => {
                 this.facetPaneVisible = !this.facetPaneVisible;
                 this.emitFacetPaneVisibilityChanged();
-            }}
+            }}
           ></smart-facet-bar>`
-            : nothing}
-
-      <div
-        id="content-container"
-        class=${this.mobileView ? 'mobile' : 'desktop'}
-      >
+            : nothing}
+
+      <div
+        id="content-container"
+        class=${this.mobileView ? 'mobile' : 'desktop'}
+      >
         ${this.placeholderType
             ? this.emptyPlaceholderTemplate
-            : this.collectionBrowserTemplate}
-      </div>
+            : this.collectionBrowserTemplate}
+      </div>
     `;
     }
     /**
@@ -475,23 +520,23 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Template for the placeholder content to show when no results are available.
      */
     get emptyPlaceholderTemplate() {
-        return html `
-      <empty-placeholder
-        .placeholderType=${this.placeholderType}
-        ?isMobileView=${this.mobileView}
-        ?isCollection=${!!this.withinCollection}
-        .detailMessage=${this.dataSource.queryErrorMessage ?? ''}
-        .baseNavigationUrl=${this.baseNavigationUrl}
-      ></empty-placeholder>
+        return html `
+      <empty-placeholder
+        .placeholderType=${this.placeholderType}
+        ?isMobileView=${this.mobileView}
+        ?isCollection=${!!this.withinCollection}
+        .detailMessage=${this.dataSource.queryErrorMessage ?? ''}
+        .baseNavigationUrl=${this.baseNavigationUrl}
+      ></empty-placeholder>
     `;
     }
     /**
      * Top-level template for rendering the left (facets) and right (results) columns.
      */
     get collectionBrowserTemplate() {
-        return html `
-      <div id="left-column-scroll-sentinel"></div>
-      ${this.leftColumnTemplate} ${this.rightColumnTemplate}
+        return html `
+      <div id="left-column-scroll-sentinel"></div>
+      ${this.leftColumnTemplate} ${this.rightColumnTemplate}
     `;
     }
     /**
@@ -510,33 +555,33 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * accordion-style facets.
      */
     get mobileLeftColumnTemplate() {
-        return html `
-      <div
-        id="left-column"
-        class="column${this.isResizeToMobile ? ' preload' : ''}"
-      >
-        ${this.facetTopViewSlot} ${this.resultsCountTemplate}
-        <div id="facets-header-container">${this.mobileFacetsTemplate}</div>
-      </div>
+        return html `
+      <div
+        id="left-column"
+        class="column${this.isResizeToMobile ? ' preload' : ''}"
+      >
+        ${this.facetTopViewSlot} ${this.resultsCountTemplate}
+        <div id="facets-header-container">${this.mobileFacetsTemplate}</div>
+      </div>
     `;
     }
     /**
      * Template for the desktop version of the left column, displaying the facets sidebar.
      */
     get desktopLeftColumnTemplate() {
-        return html `
-      <div id="left-column" class="column" ?hidden=${!this.facetPaneVisible}>
-        ${this.facetTopViewSlot}
-        <div id="facets-header-container">
-          <h2 id="facets-header" class="sr-only">${msg('Filters')}</h2>
-          ${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
-        </div>
-        <div id="facets-container" aria-labelledby="facets-header">
-          ${this.facetsTemplate}
-          <div id="facets-scroll-sentinel"></div>
-        </div>
-        <div id="facets-bottom-fade"></div>
-      </div>
+        return html `
+      <div id="left-column" class="column" ?hidden=${!this.facetPaneVisible}>
+        ${this.facetTopViewSlot}
+        <div id="facets-header-container">
+          <h2 id="facets-header" class="sr-only">${msg('Filters')}</h2>
+          ${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
+        </div>
+        <div id="facets-container" aria-labelledby="facets-header">
+          ${this.facetsTemplate}
+          <div id="facets-scroll-sentinel"></div>
+        </div>
+        <div id="facets-bottom-fade"></div>
+      </div>
     `;
     }
     /**
@@ -544,8 +589,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * - mainly used to render userlists
      */
     get facetTopViewSlot() {
-        return html `<div id="facet-top-view">
-      <slot name="facet-top-slot"></slot>
+        return html `<div id="facet-top-view">
+      <slot name="facet-top-slot"></slot>
     </div>`;
     }
     /**
@@ -560,15 +605,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const resultsCount = this.totalResults?.toLocaleString();
         const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
         // Added data-testid for Playwright testing
-        return html `
-      <div id="results-total" class=${classes} data-testid="results-total">
-        <span id="big-results-count">
-          ${shouldShowSearching ? html `Searching&hellip;` : resultsCount}
-        </span>
-        <span id="big-results-label">
-          ${shouldShowSearching ? nothing : resultsLabel}
-        </span>
-      </div>
+        return html `
+      <div id="results-total" class=${classes} data-testid="results-total">
+        <span id="big-results-count">
+          ${shouldShowSearching ? html `Searching&hellip;` : resultsCount}
+        </span>
+        <span id="big-results-label">
+          ${shouldShowSearching ? nothing : resultsLabel}
+        </span>
+      </div>
     `;
     }
     /**
@@ -581,45 +626,47 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             'full-width': !this.facetPaneVisible,
             'smart-results-spacing': !!this.showSmartResults,
         });
-        return html `
-      <div id="right-column" class=${rightColumnClasses}>
+        return html `
+      <div id="right-column" class=${rightColumnClasses}>
         ${this.showSmartResults
             ? html `<slot name="smart-results"></slot>`
-            : nothing}
-        <section id="results">
-          <h2 class="results-section-heading">
-            <slot name="results-heading"></slot>
-          </h2>
-          <div id="cb-top-view">
-            <slot name="cb-top-slot"></slot>
-          </div>
+            : nothing}
+        <section id="results">
+          <h2 class="results-section-heading">
+            <slot name="results-heading"></slot>
+          </h2>
+          <div id="cb-top-view">
+            <slot name="cb-top-slot"></slot>
+          </div>
           ${this.isManageView
             ? this.manageBarTemplate
-            : this.sortFilterBarTemplate}
-          <slot name="cb-results"></slot>
+            : this.sortFilterBarTemplate}
+          <slot name="cb-results"></slot>
           ${this.displayMode === `list-compact` && this.totalResults
             ? this.listHeaderTemplate
-            : nothing}
-          ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
-        </section>
-      </div>
+            : nothing}
+          ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
+        </section>
+      </div>
     `;
     }
     /**
      * Template for the infinite scroller widget that contains the result tiles.
      */
     get infiniteScrollerTemplate() {
-        return html `<infinite-scroller
-      class=${this.infiniteScrollerClasses}
-      itemCount=${this.placeholderType ? 0 : nothing}
-      ariaLandmarkLabel="Search results"
-      .cellProvider=${this}
-      .placeholderCellTemplate=${this.placeholderCellTemplate}
-      @scrollThresholdReached=${this.scrollThresholdReached}
-      @visibleCellsChanged=${this.visibleCellsChanged}
+        return html `<infinite-scroller
+      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}
+      @visibleCellsChanged=${this.visibleCellsChanged}
       >${this.displayMode === 'grid'
             ? html `<slot name="result-last-tile" slot="result-last-tile"></slot>`
-            : nothing}
+            : nothing}
     </infinite-scroller>`;
     }
     /**
@@ -632,6 +679,24 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             hidden: !!this.placeholderType,
         });
     }
+    /**
+     * 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.
+     */
+    get estimatedTileHeight() {
+        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.
      */
@@ -653,29 +718,29 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         // We only show relevance sort if a search query is currently defined
         sortFieldAvailability.relevance = this.isRelevanceSortAvailable;
-        return html `
-      <sort-filter-bar
-        .defaultSortField=${this.defaultSortField}
-        .defaultSortDirection=${this.defaultSortDirection}
-        .selectedSort=${this.selectedSort}
-        .sortDirection=${this.sortDirection}
-        .sortFieldAvailability=${sortFieldAvailability}
-        .displayMode=${this.displayMode}
-        .selectedTitleFilter=${this.selectedTitleFilter}
-        .selectedCreatorFilter=${this.selectedCreatorFilter}
-        .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
-        .enableSortOptionsSlot=${this.enableSortOptionsSlot}
-        .suppressDisplayModes=${this.suppressDisplayModes}
-        @sortChanged=${this.userChangedSort}
-        @displayModeChanged=${this.displayModeChanged}
-        @titleLetterChanged=${this.titleLetterSelected}
-        @creatorLetterChanged=${this.creatorLetterSelected}
-      >
-        ${this.tileBlurCheckboxTemplate}
-        <slot name="sort-options-left" slot="sort-options-left"></slot>
-        <slot name="sort-options" slot="sort-options"></slot>
-        <slot name="sort-options-right" slot="sort-options-right"></slot>
-      </sort-filter-bar>
+        return html `
+      <sort-filter-bar
+        .defaultSortField=${this.defaultSortField}
+        .defaultSortDirection=${this.defaultSortDirection}
+        .selectedSort=${this.selectedSort}
+        .sortDirection=${this.sortDirection}
+        .sortFieldAvailability=${sortFieldAvailability}
+        .displayMode=${this.displayMode}
+        .selectedTitleFilter=${this.selectedTitleFilter}
+        .selectedCreatorFilter=${this.selectedCreatorFilter}
+        .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
+        .enableSortOptionsSlot=${this.enableSortOptionsSlot}
+        .suppressDisplayModes=${this.suppressDisplayModes}
+        @sortChanged=${this.userChangedSort}
+        @displayModeChanged=${this.displayModeChanged}
+        @titleLetterChanged=${this.titleLetterSelected}
+        @creatorLetterChanged=${this.creatorLetterSelected}
+      >
+        ${this.tileBlurCheckboxTemplate}
+        <slot name="sort-options-left" slot="sort-options-left"></slot>
+        <slot name="sort-options" slot="sort-options"></slot>
+        <slot name="sort-options-right" slot="sort-options-right"></slot>
+      </sort-filter-bar>
     `;
     }
     /**
@@ -686,20 +751,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         // Only show the checkbox for @archive.org users
         if (!this.dataSource.sessionContext?.is_archive_user)
             return nothing;
-        return html `
-      <label
-        id="tile-blur-label"
-        for="tile-blur-check"
-        slot="sort-options-right"
-      >
-        ${msg('Blurring')}
-        <input
-          id="tile-blur-check"
-          type="checkbox"
-          ?checked=${!this.shouldSuppressTileBlurring}
-          @change=${this.tileBlurCheckboxChanged}
-        />
-      </label>
+        return html `
+      <label
+        id="tile-blur-label"
+        for="tile-blur-check"
+        slot="sort-options-right"
+      >
+        ${msg('Blurring')}
+        <input
+          id="tile-blur-check"
+          type="checkbox"
+          ?checked=${!this.shouldSuppressTileBlurring}
+          @change=${this.tileBlurCheckboxChanged}
+        />
+      </label>
     `;
     }
     /**
@@ -707,27 +772,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * showing the management view. This generally replaces the sort bar when present.
      */
     get manageBarTemplate() {
-        return html `
-      <manage-bar
-        .label=${this.manageViewLabel}
-        .modalManager=${this.modalManager}
-        .selectedItems=${this.dataSource.checkedTileModels}
-        .profileElement=${this.profileElement}
-        showSelectAll
-        showUnselectAll
-        ?showItemManageButton=${this.pageContext === 'search'}
-        ?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
-        @removeItems=${this.handleRemoveItems}
-        @manageItems=${this.handleManageItems}
-        @selectAll=${() => this.dataSource.checkAllTiles()}
-        @unselectAll=${() => this.dataSource.uncheckAllTiles()}
+        return html `
+      <manage-bar
+        .label=${this.manageViewLabel}
+        .modalManager=${this.modalManager}
+        .selectedItems=${this.dataSource.checkedTileModels}
+        .profileElement=${this.profileElement}
+        showSelectAll
+        showUnselectAll
+        ?showItemManageButton=${this.pageContext === 'search'}
+        ?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
+        @removeItems=${this.handleRemoveItems}
+        @manageItems=${this.handleManageItems}
+        @selectAll=${() => this.dataSource.checkAllTiles()}
+        @unselectAll=${() => this.dataSource.uncheckAllTiles()}
         @cancel=${() => {
             this.isManageView = false;
             this.dataSource.uncheckAllTiles();
             if (this.searchResultsLoading)
                 this.dataSource.resetPages();
-        }}
-      ></manage-bar>
+        }}
+      ></manage-bar>
     `;
     }
     /**
@@ -815,7 +880,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if ((this.currentPage ?? 1) > 1) {
             this.goToPage(1);
         }
-        this.currentPage = 1;
+        this.setCurrentPage(1);
     }
     /**
      * Fires an analytics event for sorting changes.
@@ -962,15 +1027,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 label: target.open ? 'open' : 'closed',
             });
         };
-        return html `
-      <details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
-        <summary>
-          <span class="collapser-icon">${chevronIcon}</span>
-          <h2>${msg('Filters')}</h2>
-          ${this.clearFiltersBtnTemplate(true)}
-        </summary>
-        ${this.facetsTemplate}
-      </details>
+        return html `
+      <details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
+        <summary>
+          <span class="collapser-icon">${chevronIcon}</span>
+          <h2>${msg('Filters')}</h2>
+          ${this.clearFiltersBtnTemplate(true)}
+        </summary>
+        ${this.facetsTemplate}
+      </details>
     `;
     }
     /**
@@ -1054,50 +1119,50 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const filterByNetworkLabel = msg('Filter by Network');
         const filterByShowLabel = msg('Filter by Show');
         const shows = showEntries.map(([show]) => show);
-        const loadingIndicator = html `
-      <span slot="empty-options">
-        <img src="https://archive.org/images/loading.gif" />
-      </span>
+        const loadingIndicator = html `
+      <span slot="empty-options">
+        <img src="https://archive.org/images/loading.gif" />
+      </span>
     `;
-        const errorMessage = html `
-      <span slot="empty-options">
-        ${msg('Unable to fetch options, try again later')}
-      </span>
+        const errorMessage = html `
+      <span slot="empty-options">
+        ${msg('Unable to fetch options, try again later')}
+      </span>
     `;
-        return html `
-      <div id="tv-filters" slot="facets-top">
-        <ia-combo-box
-          id="tv-networks"
-          class="tv-filter-dropdown"
-          placeholder=${filterByNetworkLabel}
-          clearable
-          wrap-arrow-keys
-          sort
-          .options=${networks.map((n, i) => ({ id: `network-${i}`, text: n }))}
-          @toggle=${this.tvDropdownToggled}
-          @change=${this.networksDropdownChanged}
-        >
-          <span slot="label" class="sr-only">${filterByNetworkLabel}</span>
-          ${this.tvMapsLoading ? loadingIndicator : nothing}
-          ${this.tvMapsErrored ? errorMessage : nothing}
-        </ia-combo-box>
-        <ia-combo-box
-          id="tv-shows"
-          class="tv-filter-dropdown"
-          placeholder=${filterByShowLabel}
-          max-autocomplete-entries="500"
-          clearable
-          wrap-arrow-keys
-          sort
-          .options=${shows.map((s, i) => ({ id: `show-${i}`, text: s }))}
-          @toggle=${this.tvDropdownToggled}
-          @change=${this.showsDropdownChanged}
-        >
-          <span slot="label" class="sr-only">${filterByShowLabel}</span>
-          ${this.tvMapsLoading ? loadingIndicator : nothing}
-          ${this.tvMapsErrored ? errorMessage : nothing}
-        </ia-combo-box>
-      </div>
+        return html `
+      <div id="tv-filters" slot="facets-top">
+        <ia-combo-box
+          id="tv-networks"
+          class="tv-filter-dropdown"
+          placeholder=${filterByNetworkLabel}
+          clearable
+          wrap-arrow-keys
+          sort
+          .options=${networks.map((n, i) => ({ id: `network-${i}`, text: n }))}
+          @toggle=${this.tvDropdownToggled}
+          @change=${this.networksDropdownChanged}
+        >
+          <span slot="label" class="sr-only">${filterByNetworkLabel}</span>
+          ${this.tvMapsLoading ? loadingIndicator : nothing}
+          ${this.tvMapsErrored ? errorMessage : nothing}
+        </ia-combo-box>
+        <ia-combo-box
+          id="tv-shows"
+          class="tv-filter-dropdown"
+          placeholder=${filterByShowLabel}
+          max-autocomplete-entries="500"
+          clearable
+          wrap-arrow-keys
+          sort
+          .options=${shows.map((s, i) => ({ id: `show-${i}`, text: s }))}
+          @toggle=${this.tvDropdownToggled}
+          @change=${this.showsDropdownChanged}
+        >
+          <span slot="label" class="sr-only">${filterByShowLabel}</span>
+          ${this.tvMapsLoading ? loadingIndicator : nothing}
+          ${this.tvMapsErrored ? errorMessage : nothing}
+        </ia-combo-box>
+      </div>
     `;
     }
     /**
@@ -1107,10 +1172,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if (FACETLESS_PAGE_ELEMENTS.includes(this.profileElement))
             return nothing;
         if (this.facetLoadStrategy === 'off') {
-            return html `
-        <p class="facets-message">
-          ${msg('Facets are temporarily unavailable.')}
-        </p>
+            return html `
+        <p class="facets-message">
+          ${msg('Facets are temporarily unavailable.')}
+        </p>
       `;
         }
         // We switch to TV facet ordering & date picker if we are in a TV collection or showing TV search results
@@ -1119,46 +1184,46 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const facetDisplayOrder = shouldUseTvInterface
             ? tvFacetDisplayOrder
             : defaultFacetDisplayOrder;
-        const facets = html `
-      <collection-facets
-        .collectionPagePath=${this.collectionPagePath}
-        .parentCollections=${this.dataSource.parentCollections}
-        .pageSpecifierParams=${this.dataSource.pageSpecifierParams}
-        .searchService=${this.searchService}
-        .featureFeedbackService=${this.featureFeedbackService}
-        .recaptchaManager=${this.recaptchaManager}
-        .resizeObserver=${this.resizeObserver}
-        .searchType=${this.searchType}
-        .aggregations=${this.dataSource.aggregations}
-        .histogramAggregation=${this.dataSource.histogramAggregation}
-        .minSelectedDate=${this.minSelectedDate}
-        .maxSelectedDate=${this.maxSelectedDate}
-        .selectedFacets=${this.selectedFacets}
-        .baseNavigationUrl=${this.baseNavigationUrl}
-        .collectionTitles=${this.dataSource.collectionTitles}
-        .tvChannelAliases=${this.dataSource.tvChannelAliases}
-        .showHistogramDatePicker=${this.showHistogramDatePicker}
-        .allowExpandingDatePicker=${!this.mobileView}
-        .allowDatePickerMonths=${shouldUseTvInterface}
-        .contentWidth=${this.contentWidth}
-        .query=${this.baseQuery}
-        .identifiers=${this.identifiers}
-        .filterMap=${this.dataSource.filterMap}
-        .isManageView=${this.isManageView}
-        .modalManager=${this.modalManager}
-        .analyticsHandler=${this.analyticsHandler}
-        .facetDisplayOrder=${facetDisplayOrder}
-        .isTvSearch=${shouldUseTvInterface}
-        ?collapsableFacets=${this.mobileView}
-        ?facetsLoading=${this.facetsLoading}
-        ?histogramAggregationLoading=${this.facetsLoading}
-        ?suppressMediatypeFacets=${this.suppressMediatypeFacets}
-        @facetClick=${this.facetClickHandler}
-        @facetsChanged=${this.facetsChanged}
-        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-      >
-        ${this.tvDropdownFiltersTemplate}
-      </collection-facets>
+        const facets = html `
+      <collection-facets
+        .collectionPagePath=${this.collectionPagePath}
+        .parentCollections=${this.dataSource.parentCollections}
+        .pageSpecifierParams=${this.dataSource.pageSpecifierParams}
+        .searchService=${this.searchService}
+        .featureFeedbackService=${this.featureFeedbackService}
+        .recaptchaManager=${this.recaptchaManager}
+        .resizeObserver=${this.resizeObserver}
+        .searchType=${this.searchType}
+        .aggregations=${this.dataSource.aggregations}
+        .histogramAggregation=${this.dataSource.histogramAggregation}
+        .minSelectedDate=${this.minSelectedDate}
+        .maxSelectedDate=${this.maxSelectedDate}
+        .selectedFacets=${this.selectedFacets}
+        .baseNavigationUrl=${this.baseNavigationUrl}
+        .collectionTitles=${this.dataSource.collectionTitles}
+        .tvChannelAliases=${this.dataSource.tvChannelAliases}
+        .showHistogramDatePicker=${this.showHistogramDatePicker}
+        .allowExpandingDatePicker=${!this.mobileView}
+        .allowDatePickerMonths=${shouldUseTvInterface}
+        .contentWidth=${this.contentWidth}
+        .query=${this.baseQuery}
+        .identifiers=${this.identifiers}
+        .filterMap=${this.dataSource.filterMap}
+        .isManageView=${this.isManageView}
+        .modalManager=${this.modalManager}
+        .analyticsHandler=${this.analyticsHandler}
+        .facetDisplayOrder=${facetDisplayOrder}
+        .isTvSearch=${shouldUseTvInterface}
+        ?collapsableFacets=${this.mobileView}
+        ?facetsLoading=${this.facetsLoading}
+        ?histogramAggregationLoading=${this.facetsLoading}
+        ?suppressMediatypeFacets=${this.suppressMediatypeFacets}
+        @facetClick=${this.facetClickHandler}
+        @facetsChanged=${this.facetsChanged}
+        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+      >
+        ${this.tvDropdownFiltersTemplate}
+      </collection-facets>
     `;
         // If we are using one of the opt-in facet load strategies, we may need to wrap the
         // desktop view facets in a <details> widget so that patrons can opt into loading them.
@@ -1166,20 +1231,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const showDesktopOptInWidget = this.facetLoadStrategy === 'opt-in' ||
             (this.facetLoadStrategy === 'opt-in-or-login' && !this.loggedIn);
         if (showDesktopOptInWidget && !this.mobileView) {
-            return html `
-        <details
-          class="desktop-facets-dropdown"
+            return html `
+        <details
+          class="desktop-facets-dropdown"
           @toggle=${(e) => {
                 const target = e.target;
                 this.collapsibleFacetsVisible = target.open;
-            }}
-        >
-          <summary>
-            <span class="collapser-icon">${chevronIcon}</span>
-            <h2>${msg('Filters')}</h2>
-          </summary>
-          ${facets}
-        </details>
+            }}
+        >
+          <summary>
+            <span class="collapser-icon">${chevronIcon}</span>
+            <h2>${msg('Filters')}</h2>
+          </summary>
+          ${facets}
+        </details>
       `;
         }
         // Otherwise, just render the facets component bare
@@ -1199,34 +1264,34 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             mobile,
         });
         const buttonText = mobile ? 'Clear all' : 'Clear all filters';
-        return html `
-      <div class="clear-filters-btn-row">
+        return html `
+      <div class="clear-filters-btn-row">
         ${mobile
             ? html `<span class="clear-filters-btn-separator">&nbsp;</span>`
-            : nothing}
-        <button class=${buttonClasses} @click=${this.clearFilters}>
-          ${buttonText}
-        </button>
-      </div>
+            : nothing}
+        <button class=${buttonClasses} @click=${this.clearFilters}>
+          ${buttonText}
+        </button>
+      </div>
     `;
     }
     /**
      * Template for the table header content that appears atop the compact list view.
      */
     get listHeaderTemplate() {
-        return html `
-      <div id="list-header">
-        <tile-dispatcher
-          .tileDisplayMode=${'list-header'}
-          .resizeObserver=${this.resizeObserver}
-          .sortParam=${this.sortParam}
-          .defaultSortParam=${this.defaultSortParam}
-          .mobileBreakpoint=${this.mobileBreakpoint}
-          .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.shouldSuppressTileBlurring}
-        >
-        </tile-dispatcher>
-      </div>
+        return html `
+      <div id="list-header">
+        <tile-dispatcher
+          .tileDisplayMode=${'list-header'}
+          .resizeObserver=${this.resizeObserver}
+          .sortParam=${this.sortParam}
+          .defaultSortParam=${this.defaultSortParam}
+          .mobileBreakpoint=${this.mobileBreakpoint}
+          .loggedIn=${this.loggedIn}
+          .suppressBlurring=${this.shouldSuppressTileBlurring}
+        >
+        </tile-dispatcher>
+      </div>
     `;
     }
     /**
@@ -1457,6 +1522,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if (this.boundNavigationHandler) {
             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);
@@ -1628,26 +1697,39 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * @returns
      */
     visibleCellsChanged(e) {
+        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.
+     */
+    updateVisiblePage(visibleCellIndices) {
         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];
+        const 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.
+     */
+    setCurrentPage(pageNumber) {
+        if (this.currentPage === pageNumber)
+            return;
+        this.currentPage = pageNumber;
+        this.dispatchEvent(new CustomEvent('visiblePageChanged', {
+            detail: { pageNumber },
+        }));
     }
     /**
      * A Promise which, after each query change, resolves once the fetches for the initial
@@ -1723,10 +1805,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         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);
         }
     }
@@ -1794,25 +1876,36 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             label: facetType,
         });
     }
-    scrollToPage(pageNumber) {
-        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);
+    async scrollToPage(pageNumber) {
+        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(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());
+        }
     }
     /**
      * Whether sorting by relevance makes sense for the current state.
@@ -1956,28 +2049,28 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const isRadioSearch = this.searchType === SearchType.RADIO;
         const { isTVCollection, isRadioCollection } = this;
         const shouldUseLocalTime = isTVSearch || isRadioSearch || isTVCollection || isRadioCollection;
-        return html `
-      <tile-dispatcher
-        .collectionPagePath=${this.collectionPagePath}
-        .baseNavigationUrl=${this.baseNavigationUrl}
-        .baseImageUrl=${this.baseImageUrl}
-        .model=${model}
-        .tileDisplayMode=${this.displayMode}
-        .resizeObserver=${this.resizeObserver}
-        .collectionTitles=${this.dataSource.collectionTitles}
-        .sortParam=${this.sortParam}
-        .defaultSortParam=${this.defaultSortParam}
-        .creatorFilter=${this.selectedCreatorFilter}
-        .mobileBreakpoint=${this.mobileBreakpoint}
-        .loggedIn=${this.loggedIn}
-        .suppressBlurring=${this.shouldSuppressTileBlurring}
-        .isManageView=${this.isManageView}
-        ?showTvClips=${isTVSearch || isTVCollection}
-        ?enableHoverPane=${true}
-        ?useLocalTime=${shouldUseLocalTime}
-        @resultSelected=${(e) => this.resultSelected(e)}
-      >
-      </tile-dispatcher>
+        return html `
+      <tile-dispatcher
+        .collectionPagePath=${this.collectionPagePath}
+        .baseNavigationUrl=${this.baseNavigationUrl}
+        .baseImageUrl=${this.baseImageUrl}
+        .model=${model}
+        .tileDisplayMode=${this.displayMode}
+        .resizeObserver=${this.resizeObserver}
+        .collectionTitles=${this.dataSource.collectionTitles}
+        .sortParam=${this.sortParam}
+        .defaultSortParam=${this.defaultSortParam}
+        .creatorFilter=${this.selectedCreatorFilter}
+        .mobileBreakpoint=${this.mobileBreakpoint}
+        .loggedIn=${this.loggedIn}
+        .suppressBlurring=${this.shouldSuppressTileBlurring}
+        .isManageView=${this.isManageView}
+        ?showTvClips=${isTVSearch || isTVCollection}
+        ?enableHoverPane=${true}
+        ?useLocalTime=${shouldUseLocalTime}
+        @resultSelected=${(e) => this.resultSelected(e)}
+      >
+      </tile-dispatcher>
     `;
     }
     /**
@@ -2012,479 +2105,479 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     static get styles() {
         return [
             srOnlyStyle,
-            css `
-        :host {
-          display: block;
-          --leftColumnWidth: 18rem;
-          --leftColumnPaddingTop: 2rem;
-          --leftColumnPaddingRight: 2.5rem;
-        }
-
-        #facet-top-view {
-          display: flex;
-        }
-
-        /**
-        * When page width resizes from desktop to mobile, use this class to
-        * disable expand/collapse transition when loading.
-        */
-        .preload * {
-          transition: none !important;
-          -webkit-transition: none !important;
-          -moz-transition: none !important;
-          -ms-transition: none !important;
-          -o-transition: none !important;
-        }
-
-        #content-container {
-          display: flex;
-        }
-
-        empty-placeholder {
-          margin-top: var(--placeholderMarginTop, 0);
-        }
-
-        .collapser-icon {
-          display: inline-block;
-        }
-
-        .collapser-icon svg {
-          display: inline-block;
-          width: 12px;
-          height: 12px;
-          transition: transform 0.2s ease-out;
-        }
-
-        #mobile-filter-collapse {
-          width: 100%;
-        }
-
-        #mobile-filter-collapse > summary {
-          cursor: pointer;
-          list-style: none;
-        }
-
-        #mobile-filter-collapse[open] > summary {
-          margin-bottom: 10px;
-        }
-
-        #mobile-filter-collapse h2 {
-          display: inline-block;
-          margin: 0;
-          font-size: 2rem;
-        }
-
-        #mobile-filter-collapse[open] svg {
-          transform: rotate(90deg);
-        }
-
-        #content-container.mobile {
-          display: block;
-        }
-
-        #right-column {
-          flex: 1;
-          position: relative;
-          min-height: 90vh;
-          border-right: 1px solid rgb(232, 232, 232);
-          margin-top: var(--rightColumnMarginTop, 0);
-          padding-top: var(--rightColumnPaddingTop, 2rem);
-          background: #fff;
-        }
-
-        #left-column:not([hidden]) + #right-column {
-          border-left: 1px solid rgb(232, 232, 232);
-        }
-
-        #right-column.smart-results-spacing {
-          padding-top: 0.5rem;
-          border-right: none;
-          background: transparent;
-          min-width: 0;
-        }
-
-        #results {
-          background: #fff;
-          padding-left: 1rem;
-          padding-right: 1rem;
-        }
-
-        #right-column.smart-results-spacing #results {
-          border-radius: 10px 10px 0px 0px;
-          padding-top: 0.5rem;
-          margin-top: 1rem;
-        }
-
-        .mobile #right-column {
-          border-left: none;
-        }
-
-        .mobile #results {
-          padding: 5px 5px 0;
-        }
-
-        #left-column {
-          width: var(--leftColumnWidth, 18rem);
-          /* Prevents Safari from shrinking col at first draw */
-          min-width: var(--leftColumnWidth, 18rem);
-          padding-top: var(--leftColumnPaddingTop, 2rem);
-          /* Reduced padding by 0.2rem to add the invisible border in the rule below */
-          padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
-          border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
-          z-index: 1;
-        }
-
-        .desktop #left-column {
-          top: 0;
-          position: sticky;
-          height: calc(100vh - 2rem);
-          max-height: calc(100vh - 2rem);
-          overflow-x: hidden;
-          overflow-y: scroll;
-
-          /*
-          * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
-          * does at least give us a tiny bit of control over width & color.
-          */
-          scrollbar-width: thin;
-          scrollbar-color: transparent transparent;
-        }
-        .desktop #left-column:hover {
-          scrollbar-color: auto;
-        }
-        .desktop #left-column::-webkit-scrollbar {
-          appearance: none;
-          width: 6px;
-        }
-        .desktop #left-column::-webkit-scrollbar-button {
-          height: 3px;
-          background: transparent;
-        }
-        .desktop #left-column::-webkit-scrollbar-corner {
-          background: transparent;
-        }
-        .desktop #left-column::-webkit-scrollbar-thumb {
-          border-radius: 4px;
-        }
-        .desktop #left-column:hover::-webkit-scrollbar-thumb {
-          background: rgba(0, 0, 0, 0.15);
-        }
-        .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
-          background: rgba(0, 0, 0, 0.2);
-        }
-        .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
-          background: rgba(0, 0, 0, 0.3);
-        }
-
-        #facets-bottom-fade {
-          background: linear-gradient(
-            to bottom,
-            #fbfbfd00 0%,
-            #fbfbfdc0 50%,
-            #fbfbfd 80%,
-            #fbfbfd 100%
-          );
-          position: fixed;
-          bottom: 0;
-          height: 50px;
-          /* Wide enough to cover the content, but leave the scrollbar uncovered */
-          width: calc(
-            var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
-          );
-          z-index: 2;
-          pointer-events: none;
-          transition: height 0.1s ease;
-        }
-        #facets-bottom-fade.hidden {
-          height: 0;
-        }
-
-        .facets-message {
-          font-size: 1.4rem;
-        }
-
-        .desktop-facets-dropdown > summary {
-          cursor: pointer;
-          list-style: none;
-        }
-
-        .desktop-facets-dropdown h2 {
-          display: inline-block;
-          margin: 0;
-          font-size: 1.6rem;
-        }
-
-        .desktop-facets-dropdown[open] > summary {
-          margin-bottom: 10px;
-        }
-
-        .desktop-facets-dropdown[open] svg {
-          transform: rotate(90deg);
-        }
-
-        .desktop #left-column-scroll-sentinel {
-          width: 1px;
-          height: 100vh;
-          background: transparent;
-        }
-
-        .desktop #facets-scroll-sentinel {
-          width: 1px;
-          height: 1px;
-          background: transparent;
-        }
-
-        #facets-header-container {
-          display: flex;
-          justify-content: space-between;
-          align-items: flex-start;
-          clear: both;
-        }
-
-        .desktop #facets-header-container {
-          flex-wrap: wrap;
-        }
-
-        .mobile #left-column {
-          width: 100%;
-          min-width: 0;
-          padding: 5px 0;
-          border: 0;
-        }
-
-        .clear-filters-btn-row {
-          display: inline-block;
-        }
-
-        .desktop .clear-filters-btn-row {
-          width: 100%;
-        }
-
-        .clear-filters-btn {
-          display: inline-block;
-          appearance: none;
-          margin: 0;
-          padding: 0;
-          border: 0;
-          background: none;
-          color: var(--ia-theme-link-color);
-          font-size: 1.4rem;
-          font-family: inherit;
-          cursor: pointer;
-        }
-
-        .clear-filters-btn:hover {
-          text-decoration: underline;
-        }
-
-        .clear-filters-btn-separator {
-          display: inline-block;
-          margin-left: 5px;
-          border-left: 1px solid #2c2c2c;
-          font-size: 1.4rem;
-          line-height: 1.3rem;
-        }
-
-        #tv-filters {
-          margin-bottom: 15px;
-        }
-
-        #tv-shows {
-          --comboBoxListWidth: 300px;
-        }
-
-        .tv-filter-dropdown {
-          display: block;
-          font-size: 14px;
-          margin-left: 1px;
-          margin-bottom: 5px;
-        }
-
-        .tv-filter-dropdown::part(combo-box) {
-          outline-offset: 1px;
-        }
-
-        .tv-filter-dropdown::part(option) {
-          line-height: 1.1;
-          padding: 7px;
-        }
-
-        .tv-filter-dropdown::part(clear-button) {
-          flex: 0 0 26px;
-          --combo-box-clear-icon-size: 14px;
-        }
-
-        .tv-filter-dropdown::part(icon) {
-          width: 1.4rem;
-          height: 1.4rem;
-        }
-
-        #facets-container {
-          position: relative;
-          max-height: 0;
-          transition: max-height 0.2s ease-in-out;
-          z-index: 1;
-          margin-top: var(--facetsContainerMarginTop, 3rem);
-          padding-bottom: 2rem;
-        }
-
-        .desktop #facets-container {
-          width: 18rem;
-        }
-
-        .mobile #facets-container {
-          overflow: hidden;
-          padding-bottom: 0;
-          padding-left: 10px;
-          padding-right: 10px;
-        }
-
-        #facets-container.expanded {
-          max-height: 2000px;
-        }
-
-        .results-section-heading {
-          margin: 0.5rem 0.3rem;
-          font-size: 2rem;
-          line-height: 25px;
-        }
-
-        #results-total {
-          display: flex;
-          align-items: baseline;
-        }
-
-        #results-total:not(.filtered) {
-          padding-bottom: 2rem;
-        }
-
-        .mobile #results-total {
-          position: absolute;
-          right: 10px;
-        }
-
-        #big-results-count {
-          font-size: 2.4rem;
-          font-weight: 500;
-          margin-right: 5px;
-        }
-
-        .mobile #big-results-count {
-          font-size: 2rem;
-        }
-
-        #big-results-label {
-          font-size: 1.4rem;
-          font-weight: 200;
-        }
-
-        #list-header {
-          max-height: 4.2rem;
-        }
-
-        .loading-cover {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          z-index: 1;
-          padding-top: 50px;
-        }
-
-        #tile-blur-label {
-          display: flex;
-          align-items: center;
-          column-gap: 5px;
-        }
-
-        #tile-blur-check {
-          margin: 0 5px 0 0;
-          width: 15px;
-        }
-
-        circular-activity-indicator {
-          width: 30px;
-          height: 30px;
-        }
-
-        sort-filter-bar {
-          display: block;
-          margin-bottom: 4rem;
-        }
-
-        infinite-scroller {
-          display: block;
-          --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
-          --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
-        }
-
-        infinite-scroller.list-compact {
-          --infiniteScrollerCellMinWidth: var(
-            --collectionBrowserCellMinWidth,
-            100%
-          );
-          --infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
-          --infiniteScrollerCellMaxHeight: 56px;
-          --infiniteScrollerRowGap: 10px;
-        }
-
-        infinite-scroller.list-detail {
-          --infiniteScrollerCellMinWidth: var(
-            --collectionBrowserCellMinWidth,
-            100%
-          );
-          --infiniteScrollerCellMinHeight: var(
-            --collectionBrowserCellMinHeight,
-            5rem
-          );
-          /*
-            30px in spec, compensating for a -4px margin
-            to align title with top of item image
-            src/tiles/list/tile-list.ts
-          */
-          --infiniteScrollerRowGap: 34px;
-        }
-
-        .mobile infinite-scroller.list-detail {
-          --infiniteScrollerRowGap: 24px;
-        }
-
-        infinite-scroller.grid {
-          --infiniteScrollerCellMinWidth: var(
-            --collectionBrowserCellMinWidth,
-            17rem
-          );
-          --infiniteScrollerCellMaxWidth: var(
-            --collectionBrowserCellMaxWidth,
-            1fr
-          );
-        }
-
-        /* Allow tiles to shrink a bit further at smaller viewport widths */
-        @media screen and (max-width: 880px) {
-          infinite-scroller.grid {
-            --infiniteScrollerCellMinWidth: var(
-              --collectionBrowserCellMinWidth,
-              15rem
-            );
-          }
-        }
-        /* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
-        @media screen and (max-width: 360px) {
-          infinite-scroller.grid {
-            --infiniteScrollerCellMinWidth: var(
-              --collectionBrowserCellMinWidth,
-              12rem
-            );
-          }
-        }
-
-        infinite-scroller.hidden {
-          display: none;
-        }
+            css `
+        :host {
+          display: block;
+          --leftColumnWidth: 18rem;
+          --leftColumnPaddingTop: 2rem;
+          --leftColumnPaddingRight: 2.5rem;
+        }
+
+        #facet-top-view {
+          display: flex;
+        }
+
+        /**
+        * When page width resizes from desktop to mobile, use this class to
+        * disable expand/collapse transition when loading.
+        */
+        .preload * {
+          transition: none !important;
+          -webkit-transition: none !important;
+          -moz-transition: none !important;
+          -ms-transition: none !important;
+          -o-transition: none !important;
+        }
+
+        #content-container {
+          display: flex;
+        }
+
+        empty-placeholder {
+          margin-top: var(--placeholderMarginTop, 0);
+        }
+
+        .collapser-icon {
+          display: inline-block;
+        }
+
+        .collapser-icon svg {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          transition: transform 0.2s ease-out;
+        }
+
+        #mobile-filter-collapse {
+          width: 100%;
+        }
+
+        #mobile-filter-collapse > summary {
+          cursor: pointer;
+          list-style: none;
+        }
+
+        #mobile-filter-collapse[open] > summary {
+          margin-bottom: 10px;
+        }
+
+        #mobile-filter-collapse h2 {
+          display: inline-block;
+          margin: 0;
+          font-size: 2rem;
+        }
+
+        #mobile-filter-collapse[open] svg {
+          transform: rotate(90deg);
+        }
+
+        #content-container.mobile {
+          display: block;
+        }
+
+        #right-column {
+          flex: 1;
+          position: relative;
+          min-height: 90vh;
+          border-right: 1px solid rgb(232, 232, 232);
+          margin-top: var(--rightColumnMarginTop, 0);
+          padding-top: var(--rightColumnPaddingTop, 2rem);
+          background: #fff;
+        }
+
+        #left-column:not([hidden]) + #right-column {
+          border-left: 1px solid rgb(232, 232, 232);
+        }
+
+        #right-column.smart-results-spacing {
+          padding-top: 0.5rem;
+          border-right: none;
+          background: transparent;
+          min-width: 0;
+        }
+
+        #results {
+          background: #fff;
+          padding-left: 1rem;
+          padding-right: 1rem;
+        }
+
+        #right-column.smart-results-spacing #results {
+          border-radius: 10px 10px 0px 0px;
+          padding-top: 0.5rem;
+          margin-top: 1rem;
+        }
+
+        .mobile #right-column {
+          border-left: none;
+        }
+
+        .mobile #results {
+          padding: 5px 5px 0;
+        }
+
+        #left-column {
+          width: var(--leftColumnWidth, 18rem);
+          /* Prevents Safari from shrinking col at first draw */
+          min-width: var(--leftColumnWidth, 18rem);
+          padding-top: var(--leftColumnPaddingTop, 2rem);
+          /* Reduced padding by 0.2rem to add the invisible border in the rule below */
+          padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
+          border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
+          z-index: 1;
+        }
+
+        .desktop #left-column {
+          top: 0;
+          position: sticky;
+          height: calc(100vh - 2rem);
+          max-height: calc(100vh - 2rem);
+          overflow-x: hidden;
+          overflow-y: scroll;
+
+          /*
+          * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
+          * does at least give us a tiny bit of control over width & color.
+          */
+          scrollbar-width: thin;
+          scrollbar-color: transparent transparent;
+        }
+        .desktop #left-column:hover {
+          scrollbar-color: auto;
+        }
+        .desktop #left-column::-webkit-scrollbar {
+          appearance: none;
+          width: 6px;
+        }
+        .desktop #left-column::-webkit-scrollbar-button {
+          height: 3px;
+          background: transparent;
+        }
+        .desktop #left-column::-webkit-scrollbar-corner {
+          background: transparent;
+        }
+        .desktop #left-column::-webkit-scrollbar-thumb {
+          border-radius: 4px;
+        }
+        .desktop #left-column:hover::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.15);
+        }
+        .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
+          background: rgba(0, 0, 0, 0.2);
+        }
+        .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
+          background: rgba(0, 0, 0, 0.3);
+        }
+
+        #facets-bottom-fade {
+          background: linear-gradient(
+            to bottom,
+            #fbfbfd00 0%,
+            #fbfbfdc0 50%,
+            #fbfbfd 80%,
+            #fbfbfd 100%
+          );
+          position: fixed;
+          bottom: 0;
+          height: 50px;
+          /* Wide enough to cover the content, but leave the scrollbar uncovered */
+          width: calc(
+            var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
+          );
+          z-index: 2;
+          pointer-events: none;
+          transition: height 0.1s ease;
+        }
+        #facets-bottom-fade.hidden {
+          height: 0;
+        }
+
+        .facets-message {
+          font-size: 1.4rem;
+        }
+
+        .desktop-facets-dropdown > summary {
+          cursor: pointer;
+          list-style: none;
+        }
+
+        .desktop-facets-dropdown h2 {
+          display: inline-block;
+          margin: 0;
+          font-size: 1.6rem;
+        }
+
+        .desktop-facets-dropdown[open] > summary {
+          margin-bottom: 10px;
+        }
+
+        .desktop-facets-dropdown[open] svg {
+          transform: rotate(90deg);
+        }
+
+        .desktop #left-column-scroll-sentinel {
+          width: 1px;
+          height: 100vh;
+          background: transparent;
+        }
+
+        .desktop #facets-scroll-sentinel {
+          width: 1px;
+          height: 1px;
+          background: transparent;
+        }
+
+        #facets-header-container {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          clear: both;
+        }
+
+        .desktop #facets-header-container {
+          flex-wrap: wrap;
+        }
+
+        .mobile #left-column {
+          width: 100%;
+          min-width: 0;
+          padding: 5px 0;
+          border: 0;
+        }
+
+        .clear-filters-btn-row {
+          display: inline-block;
+        }
+
+        .desktop .clear-filters-btn-row {
+          width: 100%;
+        }
+
+        .clear-filters-btn {
+          display: inline-block;
+          appearance: none;
+          margin: 0;
+          padding: 0;
+          border: 0;
+          background: none;
+          color: var(--ia-theme-link-color);
+          font-size: 1.4rem;
+          font-family: inherit;
+          cursor: pointer;
+        }
+
+        .clear-filters-btn:hover {
+          text-decoration: underline;
+        }
+
+        .clear-filters-btn-separator {
+          display: inline-block;
+          margin-left: 5px;
+          border-left: 1px solid #2c2c2c;
+          font-size: 1.4rem;
+          line-height: 1.3rem;
+        }
+
+        #tv-filters {
+          margin-bottom: 15px;
+        }
+
+        #tv-shows {
+          --comboBoxListWidth: 300px;
+        }
+
+        .tv-filter-dropdown {
+          display: block;
+          font-size: 14px;
+          margin-left: 1px;
+          margin-bottom: 5px;
+        }
+
+        .tv-filter-dropdown::part(combo-box) {
+          outline-offset: 1px;
+        }
+
+        .tv-filter-dropdown::part(option) {
+          line-height: 1.1;
+          padding: 7px;
+        }
+
+        .tv-filter-dropdown::part(clear-button) {
+          flex: 0 0 26px;
+          --combo-box-clear-icon-size: 14px;
+        }
+
+        .tv-filter-dropdown::part(icon) {
+          width: 1.4rem;
+          height: 1.4rem;
+        }
+
+        #facets-container {
+          position: relative;
+          max-height: 0;
+          transition: max-height 0.2s ease-in-out;
+          z-index: 1;
+          margin-top: var(--facetsContainerMarginTop, 3rem);
+          padding-bottom: 2rem;
+        }
+
+        .desktop #facets-container {
+          width: 18rem;
+        }
+
+        .mobile #facets-container {
+          overflow: hidden;
+          padding-bottom: 0;
+          padding-left: 10px;
+          padding-right: 10px;
+        }
+
+        #facets-container.expanded {
+          max-height: 2000px;
+        }
+
+        .results-section-heading {
+          margin: 0.5rem 0.3rem;
+          font-size: 2rem;
+          line-height: 25px;
+        }
+
+        #results-total {
+          display: flex;
+          align-items: baseline;
+        }
+
+        #results-total:not(.filtered) {
+          padding-bottom: 2rem;
+        }
+
+        .mobile #results-total {
+          position: absolute;
+          right: 10px;
+        }
+
+        #big-results-count {
+          font-size: 2.4rem;
+          font-weight: 500;
+          margin-right: 5px;
+        }
+
+        .mobile #big-results-count {
+          font-size: 2rem;
+        }
+
+        #big-results-label {
+          font-size: 1.4rem;
+          font-weight: 200;
+        }
+
+        #list-header {
+          max-height: 4.2rem;
+        }
+
+        .loading-cover {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          z-index: 1;
+          padding-top: 50px;
+        }
+
+        #tile-blur-label {
+          display: flex;
+          align-items: center;
+          column-gap: 5px;
+        }
+
+        #tile-blur-check {
+          margin: 0 5px 0 0;
+          width: 15px;
+        }
+
+        circular-activity-indicator {
+          width: 30px;
+          height: 30px;
+        }
+
+        sort-filter-bar {
+          display: block;
+          margin-bottom: 4rem;
+        }
+
+        infinite-scroller {
+          display: block;
+          --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
+          --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
+        }
+
+        infinite-scroller.list-compact {
+          --infiniteScrollerCellMinWidth: var(
+            --collectionBrowserCellMinWidth,
+            100%
+          );
+          --infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
+          --infiniteScrollerCellMaxHeight: 56px;
+          --infiniteScrollerRowGap: 10px;
+        }
+
+        infinite-scroller.list-detail {
+          --infiniteScrollerCellMinWidth: var(
+            --collectionBrowserCellMinWidth,
+            100%
+          );
+          --infiniteScrollerCellMinHeight: var(
+            --collectionBrowserCellMinHeight,
+            5rem
+          );
+          /*
+            30px in spec, compensating for a -4px margin
+            to align title with top of item image
+            src/tiles/list/tile-list.ts
+          */
+          --infiniteScrollerRowGap: 34px;
+        }
+
+        .mobile infinite-scroller.list-detail {
+          --infiniteScrollerRowGap: 24px;
+        }
+
+        infinite-scroller.grid {
+          --infiniteScrollerCellMinWidth: var(
+            --collectionBrowserCellMinWidth,
+            17rem
+          );
+          --infiniteScrollerCellMaxWidth: var(
+            --collectionBrowserCellMaxWidth,
+            1fr
+          );
+        }
+
+        /* Allow tiles to shrink a bit further at smaller viewport widths */
+        @media screen and (max-width: 880px) {
+          infinite-scroller.grid {
+            --infiniteScrollerCellMinWidth: var(
+              --collectionBrowserCellMinWidth,
+              15rem
+            );
+          }
+        }
+        /* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
+        @media screen and (max-width: 360px) {
+          infinite-scroller.grid {
+            --infiniteScrollerCellMinWidth: var(
+              --collectionBrowserCellMinWidth,
+              12rem
+            );
+          }
+        }
+
+        infinite-scroller.hidden {
+          display: none;
+        }
       `,
         ];
     }
@@ -2717,7 +2810,7 @@ __decorate([
 __decorate([
     query('infinite-scroller')
 ], CollectionBrowser.prototype, "infiniteScroller", void 0);
-CollectionBrowser = __decorate([
+CollectionBrowser = CollectionBrowser_1 = __decorate([
     customElement('collection-browser')
 ], CollectionBrowser);
 export { CollectionBrowser };