const list = document.createElement("ul");
document.body.appendChild(list);

const sentinel = document.createElement("div");
sentinel.textContent = "Loading...";
sentinel.style.padding = "20px";
document.body.appendChild(sentinel);

let page = 0;
const pageSize = 20;

function loadMore() {
  for (let i = 1; i <= pageSize; i++) {
    const li = document.createElement("li");
    li.textContent = "Item " + (page * pageSize + i);
    list.appendChild(li);
  }
  page++;
}

// Initial load
loadMore();

// Observe the sentinel and load more when it enters the viewport
const observer = new IntersectionObserver(
  (entries) => {
    if (entries[0].isIntersecting) {
      loadMore();
    }
  },
  { rootMargin: "100px" }
);

observer.observe(sentinel);