Start a discussion
Back
ReplySubscribe
Livewire

Livewire Infinite Scroll with flex-wrap

The course has articles in a format with one right after the other.

I'm trying to figure out if there is a way to adapt it to a situation where you have multiple items on the same row such as an e-commerce listing of products.

With a livewire component requiring a wrapper/parent div, it would drop the next chunk div below the previous one and not allow a continuous display of items. I can't hardcode how many per line because of differing screen resolutions. It's inside a full-width div and not a sized container.

This is from the course...

    <div class="space-y-8">
        @for ($chunk = 0; $chunk < $page; $chunk++)
            <livewire:article-chunk :ids="$chunks[$chunk]" :key="$chunk" />
        @endfor
    </div>

This is what I'm trying to do...

<div class="w-full">
  <div class="flex flex-wrap gap-6">
        @for ($chunk = 0; $chunk < $page; $chunk++)
            <livewire:article-chunk :ids="$chunks[$chunk]" :key="$chunk" />
        @endfor
  </div>
</div>

The wrapper div in the article-chunk component doesn't allow this type of design.

Any ideas on a modification that might get this to work.

ruben48506
ruben48506
0
1
320
ruben48506
ruben48506

This is what I have come up with and it seems to do the trick using a different method. Does anyone see any drawbacks to using this method...

This is the main Livewire component...

    public $items;
    public $perLoad = 10;
    public $loads = 1;

    public function mount()
    {
       $this->items = new Collection();
       $this->loadMore();
    }

    public function render()
    {

        return view('livewire.home');
    }

    public function loadMore()
    {
        $newItems = Item::skip($this->perLoad * $this->loads)->take($this->perLoad)->get();
        $this->items = $this->items->merge($newItems);
        $this->loads++;
    }

This is the other component for the individual item (very basic)...

    public $item;

    public function render()
    {
        return view('livewire.item-block');
    }

This is the part of the main component's blade view which has the loop...

    @foreach($items as $item)
         <livewire:item-block :item="$item" :key="$item->id" />
    @endforeach

As far as I can tell from the developer tools in the browser, only the new items are being sent to the browser by livewire based on the size of each fetch. Also, the time is consistent from one fetch to another.

Without using a 2nd livewire component for the item block, the size of the fetch kept increasing which probably meant Livewire was sending the entire contents of the for/each loop every time instead of just sending the new items.

0
Reply