Mixing x-intersect with x-for for continuous scrolling/lazy loading

[an0nusr]

Hi,

I noticed that, when trying to load a large number of elements into an x-for loop, there were some performance issues (it was taking about 1.7s to handle ~1000 elements).

To try to improve performance, I thought I would try something like this to reduce the number of items loaded in the x-for:

    filteredStories: [], // stories based on tag selections
    allStories: [], // all possible stories
    shownStories() { return this.filteredStories.slice(0, this.loadedStories) }, // stories that should be rendered
    loadedStories: 10,

And then I could use x-intersect to increase loadedStories as a user scrolled the page.

The part I'm having trouble with this is:

<div x-cloak x-data="storyData" class="flex flex-wrap justify-around">
            <template x-for="story in shownStories" :key="story.Link" @tagchange.document="handleTagChange">
                <article class="hidden ba mv4 ma2 w-40-ns w-100">...

I'm not sure how to use the x-intersect annotation with the x-for loop. Ideally what I'd like to do is to load more stories (increase the loadedStories number) once one of of the last items in the list entered the viewport, but I'm not sure how to attach x-intersect onto a specific item in the loop.

Is there a good mechanism for this?

Thank you for any help!

[SimoTod]

I don't think it's possible to have a different attribute only on the old item. I would just add a span with x-intersect after the template element

[an0nusr]

Ah darn - I was hoping there was some magic that could be done with something like bind. No worries, though. I can just add a "Loading" span underneath the items.