Tags
jinja has a loop variable that is very handy to use with htmx. Whether you want to implement a click to load more or an infinite scroll this loop variable is very handy.
{% for person in persons %} <li {% if loop.last %} hx-get="{{ url_for('infinite', page=next_page) }}" hx-trigger="intersect once" hx-target="#persons" hx-swap='beforeend' hx-indicator="#persons-loading" {% endif %} {{ person.name.upper() }} - {{ person.phone_number }} </li> {% endfor %}
Now for every chunk of contacts that we load we will trigger the infinite scroll by loading more once the last one has intersected the screen.