Infinite Loading

Overview

The LoadMore component replaces page-number pagination with a progressive enhancement button on paginated listing pages. When JavaScript is available, clicking “Load More” fetches or reveals the next batch of items and appends them to the current view. When JavaScript is unavailable, pages fall back to standard page-number pagination (article routes) or display all items without pagination (docs indexes).

The feature is controlled by a single site-level toggle: loadMore.enabled (default: true).

Site Configuration

To disable Load More across the entire site, set loadMore.enabled to false in src/site/config/site.ts:

export const siteConfig: SiteConfig = {
  ...DEFAULT_SITE_CONFIG,

  loadMore: {
    enabled: false,
  },
};

When disabled, article routes show standard page-number pagination and docs indexes retain their existing page-number pagination. No other changes are required.

Two Modes

Load More operates differently depending on the route type.

Article Routes

Article routes include the articles index, category listings, and tag listings. These routes use SSG — each page is a pre-rendered HTML file.

When Load More is active, page 1 is the entry point. Clicking “Load More” fetches the next SSG page via an HTML-over-the-wire request, extracts the article card elements from the response using DOMParser and the [data-article-grid] selector, and appends them to the current grid. Subsequent clicks repeat the process until all pages are exhausted.

The button disappears once the last page is loaded. Neither the button nor page-number pagination appears when all content fits on the first page.

Without JavaScript, the page renders standard page-number pagination links.

Docs Indexes

Docs indexes (theme-docs and site-docs) use client-side vanilla JS pagination. All entries are pre-loaded in a JSON payload — no server request is made on Load More.

When Load More is active, the pagination getter switches from windowed mode (show page N only) to accumulative mode (show pages 1 through N). Clicking “Load More” increments the page counter, revealing the next window of items while keeping all previously loaded items visible.

The status summary updates to a count-based format: “Showing 24 of 48 docs.” Filter changes reset the accumulative counter to page 1.

The URL is not updated on Load More clicks for docs indexes. This avoids an asymmetry where ?page=3 would mean “pages 1–3” in Load More mode versus “page 3 only” in standard pagination mode.

Without JavaScript, docs indexes display all items (existing behavior — no change).

Single-Page Behavior

When all content fits on a single page, neither the Load More button nor page-number pagination is rendered. This applies to both article routes and docs indexes.

Accessibility

• An ARIA live region announces the number of newly loaded items after each Load More action (e.g., “12 more articles loaded”).
• After loading, keyboard focus moves to the first newly appended item so users can continue navigating without returning to the button.
• The Load More button is a standard <button> element and is fully keyboard and screen-reader accessible.