Infinite scroll

Hello!

I’m trying to make infinite scroll with Sprig and it looks like it’s working but I want to be sure if everything is good because I have the feeling that it’s not.

So I used information from here:

https://putyourlightson.com/sprig/demo/3

What I did with this is added some htmx information to the button and got this:

 <button id="load-more" sprig s-val:offset="{{ offset + _limit }}" hx-trigger="revealed"
    hx-swap="afterend" s-target="this" s-swap="outerHTML">Load more</button>

It looks like it’s working in the front-end but it doesn’t work in Sprig playground so I have the feeling that I made something wrong.

[bencroker]

You should use s- attributes only, otherwise you’ll get duplicates. But the issue is that you’ve copy-pasted and then changed an example without fully understanding it. Here’s a working example of infinite scroll to get you started.

{% for entry in craft.entries.offset(offset).limit(limit).all() %}
  <h1>{{ entry.title }}</h1>
{% endfor %}

 <div sprig s-val:offset="{{ offset + limit }}" s-trigger="revealed" s-swap="outerHTML" s-target="this"></div>

[lucosius]

In my entries archive page I have this:

{{ sprig('_components/load-more', {
    offset: 0,
    _limit: 12,
    _type: 'naujienos',
}) }}

load-more.twig file looks like this:

<div class="row"> {% set entries = craft.entries() .section('articles') .type(_type) .with([ 'featureImage', 'postCategories' ]) .limit(_limit) .offset(offset) %}

{% for entry in entries %}
 <div class="col-6 col-md-6 col-lg-4 mt-5 post">
{% include 'blocks/small/_article-no-category'  %}
</div>

{% endfor %}
</div>

{% if entries %}
     <button id="load-more" sprig s-val:offset="{{ offset + _limit }}" hx-trigger="revealed"
    hx-swap="afterend" s-target="this" s-swap="outerHTML">Load more</button>
    </div>
{% endif %}

The file that I’m including looks like this:

{# Setup an arry of the field handles you're interested in #}
{% set fields = ['ekranas', 'dizainas', 'baterija', 'garsas', 'garsotakelis', 'grafika', 'istorija', 'kamera', 'veikla', 'valdymas', 'veikimas', 'zaismas'] %}

{# set some defaults #}
{% set totalAmount = 0 %}
{% set totalFields = 0 %}

{# loop through the field array #}
{% for field in fields %}

    {# grab the field's value from the entry #}
    {% set value = attribute(entry, field) %}

    {# skip over fields that were left blank, but count fields where 0 was entered #}
    {% if value is not empty and value >= 0 %}

        {# add to the running total and running number of fields with values #}
        {% set totalAmount = totalAmount + value %}
        {% set totalFields = totalFields + 1 %}

    {% endif %}
{% endfor %}
      {% set image = entry.featureImage[0] ?? null %}
    {% if image %}
        <img class="img-text" src="{{ image.url('indexsmall') }}" alt="{{ entry.title }}">
         {% else %}
   <img class="img-text" src="https://testing.telefonai.eu/assets/nuotraukos/_indexsmall/Apple_underwa-pagr.jpg"> 
        {% endif %}
<div class="heading-title mt-4">
{% if totalFields > 0 %}<span class="review-score">{{ (totalAmount / totalFields)|number(decimals=1) }}</span>
{% endif %}
<a href="{{ entry.url }}">{{ entry.title }}</a> {% if entry.trumpasPavadinimas|length %}<small>{{ entry.trumpasPavadinimas }}</small>{% endif %} <span>({{ entry.viewsWork.total }})</span> 
</div>

I think the problem is with changes that I made in button. It looks like:

<button id="load-more" sprig s-val:offset="{{ offset + _limit }}" hx-trigger="revealed" hx-swap="afterend" s-target="this" s-swap="outerHTML">Load more</button>

In Sprig demos it was like this:

<button id="load-more" sprig s-val:offset="{{ offset + _limit }}" s-target="this" s-swap="outerHTML">Load more</button>

I took hx-trigger=“revealed” hx-swap=“afterend” from htmx docs but I’m not sure if I’m using it in proper way (maybe that’s why I’m getting stuck after loading X entries).