Infinite Scroll & Pagination with IntersectionObserver

// TypeScript — explicit types throughout
interface InfiniteScrollOptions {
  rootMargin?: string;   // default '200px'
  threshold?: number;    // default 0.1
  maxDomNodes?: number;  // default 500 — recycle beyond this
}

interface FetchPayload {
  signal: AbortSignal;
}

// Plain JS equivalent: remove the interface declarations and type annotations.

export class InfiniteScrollController {
  private container: HTMLElement | null;
  private fetchFn: (p: FetchPayload) => Promise<unknown[]>;
  private abortController: AbortController;
  private observer: IntersectionObserver;
  private sentinel: HTMLElement;
  private loading = false;
  private nodeCount = 0;
  private maxDomNodes: number;

  constructor(
    container: HTMLElement,
    fetchFn: (p: FetchPayload) => Promise<unknown[]>,
    options: InfiniteScrollOptions = {}
  ) {
    this.container   = container;
    this.fetchFn     = fetchFn;
    this.maxDomNodes = options.maxDomNodes ?? 500;
    this.abortController = new AbortController();

    // Create observer with predictive rootMargin
    this.observer = new IntersectionObserver(
      this.handleIntersection.bind(this),
      {
        root:       null,
        rootMargin: options.rootMargin ?? '200px',
        threshold:  options.threshold  ?? 0.1,
      }
    );

    // Sentinel: zero-height anchor at the bottom of the container
    this.sentinel = document.createElement('div');
    this.sentinel.setAttribute('aria-hidden', 'true');
    this.sentinel.setAttribute('data-scroll-sentinel', '');
    this.container.appendChild(this.sentinel);
    this.observer.observe(this.sentinel);
  }

  private handleIntersection(entries: IntersectionObserverEntry[]): void {
    if (!entries[0].isIntersecting || this.loading) return;
    this.loading = true;

    // Micro-task scheduling: executes before the next paint without blocking it
    Promise.resolve().then(async () => {
      try {
        const data = await this.fetchFn({ signal: this.abortController.signal });
        this.renderItems(data);
      } catch (err) {
        // AbortError is expected on destroy() — swallow silently
        if ((err as Error).name !== 'AbortError') {
          console.error('[InfiniteScroll] fetch failed:', err);
        }
      } finally {
        this.loading = false;
      }
    });
  }

  private renderItems(items: unknown[]): void {
    if (!this.container) return;

    // DOM recycling: evict oldest nodes when approaching the cap
    if (this.nodeCount + items.length > this.maxDomNodes) {
      const excess = this.nodeCount + items.length - this.maxDomNodes;
      const children = Array.from(this.container.children);
      for (let i = 0; i < excess; i++) {
        const child = children[i];
        if (child && child !== this.sentinel) {
          this.container.removeChild(child);
          this.nodeCount--;
        }
      }
    }

    // Batch insertions into a DocumentFragment — one reflow instead of N
    const fragment = document.createDocumentFragment();
    for (const item of items) {
      const el = document.createElement('div');
      el.setAttribute('role', 'listitem');
      // Cast to a typed shape in real code
      el.textContent = (item as { content: string }).content;
      fragment.appendChild(el);
      this.nodeCount++;
    }

    // Insert before sentinel so it remains at the bottom
    this.container.insertBefore(fragment, this.sentinel);
  }

  destroy(): void {
    this.abortController.abort();    // cancel in-flight fetch
    this.observer.disconnect();      // stop intersection callbacks
    if (this.sentinel.parentNode) {
      this.sentinel.parentNode.removeChild(this.sentinel);
    }
    this.container = null;           // release DOM reference for GC
    this.loading   = false;
  }
}

import { useEffect, useRef, useCallback } from 'react';

interface UseInfiniteScrollOptions {
  fetchFn: (signal: AbortSignal) => Promise<unknown[]>;
  rootMargin?: string;
  maxDomNodes?: number;
}

export function useInfiniteScroll<T extends HTMLElement>(
  options: UseInfiniteScrollOptions
) {
  const sentinelRef = useRef<HTMLDivElement>(null);
  const loadingRef  = useRef(false);

  const { fetchFn, rootMargin = '200px' } = options;

  const handleIntersection = useCallback(
    async (entries: IntersectionObserverEntry[]) => {
      if (!entries[0].isIntersecting || loadingRef.current) return;
      loadingRef.current = true;

      const controller = new AbortController();
      try {
        await fetchFn(controller.signal);
      } finally {
        loadingRef.current = false;
      }
    },
    [fetchFn]
  );

  useEffect(() => {
    const sentinel = sentinelRef.current;
    if (!sentinel) return;

    const observer = new IntersectionObserver(handleIntersection, {
      rootMargin,
      threshold: 0.1,
    });
    observer.observe(sentinel);

    // Cleanup: disconnect when the component unmounts
    return () => observer.disconnect();
  }, [handleIntersection, rootMargin]);

  return sentinelRef;
}

// Usage in a component:
// const sentinelRef = useInfiniteScroll({ fetchFn: loadMoreItems });
// return <div ref={sentinelRef} aria-hidden="true" />;

// composables/useInfiniteScroll.ts
import { ref, onMounted, onUnmounted, type Ref } from 'vue';

export function useInfiniteScroll(
  fetchFn: (signal: AbortSignal) => Promise<unknown[]>,
  rootMargin = '200px'
): { sentinelRef: Ref<HTMLDivElement | null> } {
  const sentinelRef = ref<HTMLDivElement | null>(null);
  let observer: IntersectionObserver | null = null;
  let loading = false;

  onMounted(() => {
    if (!sentinelRef.value) return;

    observer = new IntersectionObserver(
      async (entries) => {
        if (!entries[0].isIntersecting || loading) return;
        loading = true;
        const ctrl = new AbortController();
        try {
          await fetchFn(ctrl.signal);
        } finally {
          loading = false;
        }
      },
      { rootMargin, threshold: 0.1 }
    );

    observer.observe(sentinelRef.value);
  });

  onUnmounted(() => {
    observer?.disconnect();
    observer = null;
  });

  return { sentinelRef };
}

// infinite-scroll.directive.ts
import {
  Directive, ElementRef, EventEmitter,
  Input, OnDestroy, OnInit, Output, NgZone
} from '@angular/core';

@Directive({ selector: '[appInfiniteScroll]', standalone: true })
export class InfiniteScrollDirective implements OnInit, OnDestroy {
  @Input() rootMargin = '200px';
  @Output() loadMore = new EventEmitter<void>();

  private observer: IntersectionObserver | null = null;

  constructor(private el: ElementRef<HTMLElement>, private zone: NgZone) {}

  ngOnInit(): void {
    // Run outside Angular's zone — no change detection on every intersection
    this.zone.runOutsideAngular(() => {
      this.observer = new IntersectionObserver(
        (entries) => {
          if (entries[0].isIntersecting) {
            // Re-enter Angular zone only when emitting to update the UI
            this.zone.run(() => this.loadMore.emit());
          }
        },
        { rootMargin: this.rootMargin, threshold: 0.1 }
      );
      this.observer.observe(this.el.nativeElement);
    });
  }

  ngOnDestroy(): void {
    this.observer?.disconnect();
    this.observer = null;
  }
}
// Usage: <div appInfiniteScroll (loadMore)="onLoadMore()" aria-hidden="true"></div>

// Paste in DevTools console on the target page
const sentinel = document.querySelector('[data-scroll-sentinel]');
if (!sentinel) { console.error('No sentinel found'); }
else {
  const io = new IntersectionObserver(e => {
    console.log('isIntersecting:', e[0].isIntersecting, 'ratio:', e[0].intersectionRatio);
  }, { rootMargin: '0px', threshold: [0, 0.5, 1] });
  io.observe(sentinel);
  console.log('Observing sentinel. Scroll the page.');
}