searxng/client/simple/src/js/main/infinite_scroll.ts

// SPDX-License-Identifier: AGPL-3.0-or-later

import { assertElement, http, settings } from "../core/toolkit.ts";

const newLoadSpinner = (): HTMLDivElement => {
  return Object.assign(document.createElement("div"), {
    className: "loader"
  });
};

const loadNextPage = async (onlyImages: boolean, callback: () => void): Promise<void> => {
  const searchForm = document.querySelector<HTMLFormElement>("#search");
  assertElement(searchForm);

  const form = document.querySelector<HTMLFormElement>("#pagination form.next_page");
  assertElement(form);

  const action = searchForm.getAttribute("action");
  if (!action) {
    throw new Error("Form action not defined");
  }

  const paginationElement = document.querySelector<HTMLElement>("#pagination");
  assertElement(paginationElement);

  paginationElement.replaceChildren(newLoadSpinner());

  try {
    const res = await http("POST", action, { body: new FormData(form) });
    const nextPage = await res.text();
    if (!nextPage) return;

    const nextPageDoc = new DOMParser().parseFromString(nextPage, "text/html");
    const articleList = nextPageDoc.querySelectorAll<HTMLElement>("#urls article");
    const nextPaginationElement = nextPageDoc.querySelector<HTMLElement>("#pagination");

    document.querySelector("#pagination")?.remove();

    const urlsElement = document.querySelector<HTMLElement>("#urls");
    if (!urlsElement) {
      throw new Error("URLs element not found");
    }

    if (articleList.length > 0 && !onlyImages) {
      // do not add <hr> element when there are only images
      urlsElement.appendChild(document.createElement("hr"));
    }

    urlsElement.append(...Array.from(articleList));

    if (nextPaginationElement) {
      const results = document.querySelector<HTMLElement>("#results");
      results?.appendChild(nextPaginationElement);
      callback();
    }
  } catch (error) {
    console.error("Error loading next page:", error);

    const errorElement = Object.assign(document.createElement("div"), {
      textContent: settings.translations?.error_loading_next_page ?? "Error loading next page",
      className: "dialog-error"
    });
    errorElement.setAttribute("role", "alert");
    document.querySelector("#pagination")?.replaceChildren(errorElement);
  }
};

const resultsElement: HTMLElement | null = document.getElementById("results");
if (!resultsElement) {
  throw new Error("Results element not found");
}

const onlyImages: boolean = resultsElement.classList.contains("only_template_images");
const observedSelector = "article.result:last-child";

const intersectionObserveOptions: IntersectionObserverInit = {
  rootMargin: "320px"
};

const observer: IntersectionObserver = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
  const [paginationEntry] = entries;

  if (paginationEntry?.isIntersecting) {
    observer.unobserve(paginationEntry.target);

    loadNextPage(onlyImages, () => {
      const nextObservedElement = document.querySelector<HTMLElement>(observedSelector);
      if (nextObservedElement) {
        observer.observe(nextObservedElement);
      }
    }).then(() => {
      // wait until promise is resolved
    });
  }
}, intersectionObserveOptions);

const initialObservedElement: HTMLElement | null = document.querySelector<HTMLElement>(observedSelector);
if (initialObservedElement) {
  observer.observe(initialObservedElement);
}