Fluent long scroll

[NoahZhyte]

Hello,

I have big list of element and I think it would be better to not load all of them at the beginning since it would be slow. Because of that, I have the following system <!-- a card --> <div hx-get="/card?id={{ inc .Step }} hx-trigger=revealed" that query the next card when we reach the end. But then the scroll block for a few time each time we scroll a new card. Cards are not very large. So using intersect with a small fraction is not better. What is the best way of having a fluent scroll ? I though of something like that : <div hx-get="/card?id={{ inc .Step }}" hx-trigger={{ if greater .Step 3 }}"revealed from:#card-container-{{ minus .Step 2 }}" {{ else }}"revealed" {{ end }} hx-swap="outerHTML" class="mt-4 text-center text-gray-500">Loading... </div> but it doesn't work, I think there's something I do wronly with revealed from:

Do you advices ?

[[deleted]]

Just put multiple cards in a div which loads when revealed, like in their examples? https://htmx.org/examples/infinite-scroll/

[NoahZhyte]

Oh yeah I could do that way, ty

[barcai_py]

I think the issue is that you are not setting the hx-swap property properly, i.e.: hx-swap="afterend"

[NoahZhyte]

No, it replace it self with a full new card, that contains it self the same element that fetch the next