Infinite Scroll with Dynamic Filtering

The Problem: Users expect infinite scroll to respect active filters. When filters change, the scroll position and loaded items create a complex state management challenge.

Why It Breaks: HTMX’s hx-trigger="revealed" for infinite scroll doesn't reset when filters change. You end up with stale pagination parameters and duplicate content.

The Broken Pattern:

<!-- This creates duplicate items when filters change -->
<div id="items-list">
    {% for item in items %}
        <div class="item">{{ item.name }}</div>
    {% endfor %}
    <div hx-get="/items?page={{ next_page }}" 
         hx-trigger="revealed" 
         hx-swap="afterend">
    </div>
</div>

Production Solution: