Infinite loader

Get the component:

wget https://raw.githubusercontent.com/emencia/alpinebricks/master/packages/@alpinebricks-infiniteloader/dist/index.min.js

Include the Alpinejs and Htmx libs in your html:

  <script type="text/javascript" src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js" defer></script>
  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
  <script type="text/javascript" src="https://unpkg.com/[email protected]"></script>

Include the component:

  <script src="/static/infinite_loader/index.min.js"></script>

Initialize it:

<script>
var $loader;
document.addEventListener('alpine:init', () => {
  $loader = $infiniteLoader.create(true);
  $loader.hxget('/pages/infinite_loader/partial.html', '#content');
});
</script>

Use it in your html:

    <div id="content"></div>
    <div x-data x-intersect="$loader.loadMore('/pages/infinite_loader/partial.html', '#content')">
    </div>

This will load the partial template from the url in the content block, adding to it