Infinite Scroll Sentinel

<!--
  Infinite scroll, built so it is still operable without scrolling.

  Two things make that true. First, the Load more button is REAL and always
  present - the sentinel only clicks it early. Keyboard users never scroll a
  viewport in the way this pattern assumes; strip the button out and the feed
  becomes reachable by mouse wheel and nothing else. Second, the aria-live
  region names the count after every append, because rows arriving unprompted
  are otherwise completely silent.

  rootMargin pre-fetches one viewport ahead so the content is usually there
  before the user reaches the bottom. Widen it to prefetch sooner, at the cost
  of loading pages nobody looks at.
-->
<div class="infeed">
  <ul class="infeed__list" id="infeed-list">
    <li class="infeed__item"><span class="infeed__title">Quarterly revenue report</span><span class="infeed__meta">Finance</span></li>
    <li class="infeed__item"><span class="infeed__title">Onboarding checklist</span><span class="infeed__meta">People</span></li>
    <li class="infeed__item"><span class="infeed__title">Incident post-mortem</span><span class="infeed__meta">Engineering</span></li>
    <li class="infeed__item"><span class="infeed__title">Brand guidelines</span><span class="infeed__meta">Design</span></li>
  </ul>

  <div class="infeed__sentinel" id="infeed-sentinel" aria-hidden="true"></div>

  <p class="infeed__status" id="infeed-status" role="status" aria-live="polite">Showing 4 of 16 results</p>

  <nav aria-label="Pagination">
    <button class="infeed__more" id="infeed-more" type="button">Load more</button>
  </nav>
</div>

<script>
  (function () {
    var PAGE_SIZE = 4;
    var TOTAL = 16;
    var list = document.getElementById('infeed-list');
    var status = document.getElementById('infeed-status');
    var button = document.getElementById('infeed-more');
    var sentinel = document.getElementById('infeed-sentinel');

    var REMAINING = [
      { title: 'Security review', meta: 'Engineering' },
      { title: 'Pricing experiment', meta: 'Growth' },
      { title: 'Support playbook', meta: 'Success' },
      { title: 'Hiring plan', meta: 'People' },
      { title: 'Roadmap Q3', meta: 'Product' },
      { title: 'Vendor audit', meta: 'Finance' },
      { title: 'Accessibility audit', meta: 'Design' },
      { title: 'Data retention policy', meta: 'Legal' },
      { title: 'Latency budget', meta: 'Engineering' },
      { title: 'Partner agreement', meta: 'Legal' },
      { title: 'Churn analysis', meta: 'Growth' },
      { title: 'Design tokens v2', meta: 'Design' }
    ];

    var shown = PAGE_SIZE;
    var busy = false;

    function loadMore() {
      if (busy || shown >= TOTAL) return;
      busy = true;
      button.disabled = true;
      button.setAttribute('aria-busy', 'true');
      button.textContent = 'Loading…';

      window.setTimeout(function () {
        var next = REMAINING.splice(0, PAGE_SIZE);
        next.forEach(function (row) {
          var li = document.createElement('li');
          li.className = 'infeed__item';
          var title = document.createElement('span');
          title.className = 'infeed__title';
          title.textContent = row.title;
          var meta = document.createElement('span');
          meta.className = 'infeed__meta';
          meta.textContent = row.meta;
          li.appendChild(title);
          li.appendChild(meta);
          list.appendChild(li);
        });

        shown += next.length;
        status.textContent = 'Showing ' + shown + ' of ' + TOTAL + ' results';
        busy = false;
        button.removeAttribute('aria-busy');

        if (shown >= TOTAL) {
          button.textContent = 'All results loaded';
          button.setAttribute('aria-disabled', 'true');
          observer.disconnect();
          return;
        }

        button.disabled = false;
        button.textContent = 'Load more';
      }, 600);
    }

    // The observer is a convenience layer over the button, not a replacement
    // for it - both paths call the same loadMore().
    var observer = new IntersectionObserver(
      function (entries) {
        if (entries[0] && entries[0].isIntersecting) loadMore();
      },
      { rootMargin: '200px 0px' }
    );

    observer.observe(sentinel);
    button.addEventListener('click', loadMore);
  })();
</script>