Posts appear as I scroll the page

I have a portfolio. In my portfolio I have a case studies and regular portfolio images. I want to have a section on the page where case studies are highlighted before showing regular portfolio items.

Here’s a video of what happens:

In this video you can see that at first only 2 case studies appear but as a scroll to the bottom of the page, the 3rd one, Mindtraits gets somehow magically added.

What is the source of this problem, and how do I fix that? Thanks for the help

Here’s my code and route.yaml file:

I found and fixed the issue.

Upon investigating, we noticed that this would get triggered when the scroll would reach the end of the page. We also noticed via the Network requests that it was loading page2 so it seems like at first we had X amounts of posts, excluding Mindtraits, and after user reaches the bottom of the page, an infinite scroll pagination is triggered to load MORE posts which is then when Mindtraits appears under the case studies.

We fixed this by simply not relying on posts variable on the top of the page at all but by making an explicit get request to only grab posts with case-study tag.

This is probably less efficient since we’re “fetching” from posts at least 3 times (1 from route.yaml, then 2x from the template file) but it got us through. This is an issue worth documenting though.