Infinite scrolling for databases

This snippet hides the Load more button and automatically loads the next batch of database items as visitors scroll toward the bottom. One shared JavaScript snippet handles table, gallery, and feed views, including multiple databases on the same page, without collection-specific selectors.

Supported layouts: Table, gallery, and feed views with Super's native Load more button.

Installation instructions

Open your site in the Super Dashboard.
Open Code → Body.
Replace any earlier version of this snippet with the complete code below, including the opening and closing script tags, and save your changes. Install it only once.
Fully reload your site, then scroll toward the end of a table, gallery, or feed database to check that more items appear automatically.

<script>
(() => {
  const key = "__superDatabaseInfiniteScroll";
  if (window[key] || !("IntersectionObserver" in window)) return;
  window[key] = true;

  const selector = "button.notion-collection-load-more";
  const preloadDistance = 400;
  const buttons = new Map();
  const progress = new WeakMap();
  let frame = 0;

  function getContext(button) {
    // Tables wrap the button in a row; cards place it beside items.
    const marker = button.closest(".notion-collection-load-more__row") || button;
    const container = marker.parentElement;
    if (!container) return null;
    const items = Array.from(container.children).filter(element =>
      element !== marker && !element.matches("script, style")
    );
    return {
      container,
      count: items.length,
      first: items[0],
      last: items[items.length - 1]
    };
  }

  function sameItems(a, b) {
    return a && b && a.container === b.container &&
      a.count === b.count && a.first === b.first && a.last === b.last;
  }

  function restore(button, state) {
    if (state.visibility) {
      button.style.setProperty("visibility", state.visibility, state.priority);
    } else {
      button.style.removeProperty("visibility");
    }
  }

  function loadMore(button) {
    const state = buttons.get(button);
    if (!state || state.fallback || !button.isConnected) return;
    if (button.disabled || button.getAttribute("aria-busy") === "true") return;
    if (!button.getClientRects().length) return;

    const rect = button.getBoundingClientRect();
    if (rect.top > window.innerHeight + preloadDistance || rect.bottom < 0) return;

    const current = getContext(button);
    if (!current || sameItems(progress.get(current.container), current)) return;

    progress.set(current.container, current);
    clearTimeout(state.timer);
    state.timer = setTimeout(() => {
      if (!button.isConnected || !sameItems(current, getContext(button))) return;
      // No progress: restore manual loading instead of retrying forever.
      state.fallback = true;
      restore(button, state);
    }, 15000);
    button.click();
  }

  const intersection = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) loadMore(entry.target);
    });
  }, { rootMargin: `0px 0px ${preloadDistance}px 0px` });

  function sync() {
    frame = 0;
    for (const [button, state] of buttons) {
      if (!button.isConnected) {
        clearTimeout(state.timer);
        intersection.unobserve(button);
        restore(button, state);
        buttons.delete(button);
      }
    }

    document.querySelectorAll(selector).forEach(button => {
      if (!getContext(button)) return;
      if (!buttons.has(button)) {
        buttons.set(button, {
          visibility: button.style.getPropertyValue("visibility"),
          priority: button.style.getPropertyPriority("visibility"),
          timer: null,
          fallback: false
        });
        button.style.setProperty("visibility", "hidden", "important");
        intersection.observe(button);
      }
      loadMore(button);
    });
  }

  function schedule() {
    if (!frame) frame = requestAnimationFrame(sync);
  }

  function start() {
    new MutationObserver(schedule).observe(document.body, {
      subtree: true,
      childList: true,
      attributes: true,
      attributeFilter: ["disabled", "aria-busy", "class"]
    });
    schedule();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", start, { once: true });
  } else {
    start();
  }
})();
</script>

Customization

Change preloadDistance = 400 to adjust how far ahead loading begins, in pixels. A larger value starts loading earlier.

Notes

The snippet uses plain JavaScript and requires no external libraries.
It detects database Load more buttons added after the initial page load, including during navigation without a full reload.
Do not hide the button with display: none. The script uses visibility: hidden to keep its position measurable.
The next automatic click waits for the surrounding items to change. Disabled or busy buttons are not clicked. If no progress is detected within 15 seconds, the button becomes visible again for manual loading; reload the page to resume automatic loading.
To remove this behavior, delete the snippet from Code → Body and reload your site.

This is an experimental snippet. Check it on your site before relying on it in production.