question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Load more `if entries` still shows if there are no more to load, and requires one last click to remove the button...

See original GitHub issue

Question

I have noticed that when testing if there are entries, that the button still shows/appears even if there are no more entries to load. Clicking it again then sets this correctly, but it feels wrong having that last click load nothing more and then the button hides. I believe this should happen on the last element that is loaded. I have posted my code blow, but I also checked the cookbook and it appears the same thing occurs. Is there anyway to set/do this check on each load?

###Code

{% extends "_layouts/global-variables.twig" %}
{% block htmlPage %}
  {% set offset = offset ?? 0 %}
  
  {% set entries = craft.entries
    .section('blog')
    .relatedTo({
      targetElement: entryId,
      field: 'relatedServices'
    })
    .with('teaserImage')
    .offset(offset)
    .limit(limit)
    .all() %}
  
  <div class="grid lg:grid-cols-2 gap-x-8 divide-y divide-gray-100 gap-y-8 lg:gap-y-20 lg:divide-y-0 mb-8">
    {% for entry in entries %}
      {% include '_routers/teasers.twig' %}
    {% endfor %}
  </div>
  
  {% if entries %}
    <button
      sprig s-val:offset="{{ offset + limit }}"
      s-target="this"
      s-swap="outerHTML"
      class="p-4 border border-white shadow-md transition ease-in-out duration-200 ///// text-white  duration-300 {{ class.btnLinks }}"
    >
      Load more articles
    </button>
  {% endif %}
{% endblock %}

To reproduce

Click the load more articles button and it loads 2 more articles (this shows 4 in total - the 2 initially loaded ad the 2 new ones loaded). This is all the articles related. However, the load more articles button still appears until it is clicked again, then it is removed/hidden.

When I check the entries|length it starts ff as 2, clicking the button it remains at 2, clicking again it is then correctly set to 0.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5

github_iconTop GitHub Comments

2reactions
bencrokercommented, Dec 19, 2020

For reference, I updated the load more recipe to use this technique: https://putyourlightson.com/sprig/cookbook#load-more

1reaction
terryuptoncommented, Dec 14, 2020

Aha. Thanks Ben. I see…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Click on a "Load More" button to reveal data
Often, a website will have a Load More button at the bottom of its list of results which loads extra items onto the...
Read more >
Remove Load More option from service portal - ServiceNow
Hi All, After upgrading to the Kingston version i am able to see that there is a load more button in the service...
Read more >
How do I load show more button only after 10 entries?
Show activity on this post. Count the number of visible "content" elements. Show/hide the "#loadMore" element based on your criterion.
Read more >
A guide to pagination, load more buttons, and infinite scroll
Here, we explain a few methods of setting up pagination, load more buttons, and infinite scroll to create more dynamic web pages.
Read more >
Infinite Scrolling, Pagination Or “Load More” Buttons ...
For search, use the “Load more” button, ideally with a dynamic number of results returned based on relevancy scores. On mobile, use the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found