[Site] Infinite Scroll - Remove wrapper

[seb-jean]

Hi, I would like to know if there is a possibility to avoid having the element having the ProductGrid_page wrapper class for each page on demo https://ux.symfony.com/demos/live-component/infinite-scroll?

Currently it is like this:

The idea would be to have this:

Would it be possible to have the <articles> directly?

Thanks :)

[smnandre]

It can be done, but only with some DOM manipulation.

That was my first attempt earlier this year...

Let's say you're rendreding "page 2"

<div # results>
</div>
<div #page1></div>
<div #page2 class="current">
    {% for ... in results %} .... {% endfor } %}
</div>

In JS just before the render you can select all items from the current page (so, just before page2 it's still page1 in the DOm) and move them to the #result div.

But i wanted something that would require no "manipulation" for maximal browser performance / no CLS.

All this obviously only based on what i tried... there are probably a lot of other solutions (and i'd be really interested to ear about them and update the demo :) )

[seb-jean]

There is this video made with Laravel Livewire: https://www.youtube.com/watch?app=desktop&v=B6TtWdA7uS0

There is also this article: https://apexcode.dev/blog/infinite-scroll-with-laravel-and-livewire, with a demo: https://play.apexcode.dev/blog

If that helps :)

[smnandre]

Do you want to try a PR ?

[seb-jean]

I have no idea how I could improve this.

[smnandre]

I found something! I'll use/show it for the part 2/2 :)

[seb-jean]

Super-Simon 🦸‍♂️ !

[smnandre]

Thanks @seb-jean, this one is for you ;) https://github.com/symfony/ux/pull/1887

[seb-jean]

Thanks @smnandre, this emoji is for you: :ok_hand: