Sprig use category filtering AND load more

Question

I have some checkboxes that filter entries by category. All that is working fine on its own. I also have a load more button that is supposed to append additional entries to the query results.

The problem is that it appends everything in the sprig component, including the category filters.

_sprig/component:

{% set category = craft.categories.id(categoryId).one() %}
{% set industry = industry ?? '' %}
{% set offset = offset ?? 0 %}
{% set limit = 6 %}

{% set relatedTo = ['and', categoryId] %}
{% set relatedTo = industry ? relatedTo|merge(industry) : categoryId %}

<section>
  <div class="template-types__industry">
    <p>Industry:</p>
    <ul>
      {% for indCat in craft.categories.group('templateCategory').all() %}
        <li>
          <input type="checkbox" id="{{ indCat.slug }}" value="{{ indCat.id }}" name="industry[]" {{ indCat.id in industry ? 'checked' }} sprig>
          <label for="{{ indCat.slug }}">{{ indCat.title }}</label>
        </li>
      {% endfor %}
    </ul>
  </div>
</section>

<section>
  <div class="row" id="results">
    {% set entryQuery = craft.entries
      .section('proposalTemplates')
      .limit(limit)
      .offset(offset)
      .relatedTo(relatedTo)
      .with(['image'])
    %}
    {% set entries = entryQuery.all() %}

    {% if entries|length %}
      {% for template in entries %}
        <div class="result">
          {{ template.title }}
        </div>
      {% endfor %}
    {% endif %}

    {% if entryQuery.count() > offset + entries|length %}
      <button sprig 
        s-val:offset="{{ offset + limit }}" 
        s-swap="outerHTML" 
        s-target="#results"
        class="template-types__load-more">
          Load more
      </button>
    {% endif %}
  </div>
</section>

I've tried breaking the results into a separate sprig component, but then changes made to the filters don't have an effect, even if they're sent as variables:

_sprig/results:

<section>
  <div class="row" id="results">
    {{ sprig('_sprig/results', with {
      limit: limit,
      offset: offset,
      relatedTo: relatedTo
    }) }}
  </div>
</section>

This should be possible...I just can't figure out a way to set it up properly.

Answer 1

Because of your component's element structure this is slightly more complex. I just added a new recipe to the Sprig cookbook called "Load More Complex" which should provide you with the solution, although you may want to move the button outside of the #results div. https://putyourlightson.com/sprig/cookbook#load-more-complex