How to create Infinite Scroll with Laravel Folio and Livewire Volt?

[hilmihidyt]

I want to create an infinite scroll using Laravel Folio and Livewire Volt. The default amount of data on this page is 10, and when the user scrolls down to the footer, there should be 10 more data loaded, but currently, the data that can be loaded when the user scrolls down only increases by 2 data. What is the correct way to create an infinite scroll with Folio and Volt? Here is the code I have made:

pages/index.blade.php

<?php

use Livewire\Volt\Component;
use Livewire\WithPagination;
use function Livewire\Volt\{computed, state, usesPagination, placeholder};
use function Laravel\Folio\name;
use Livewire\Attributes\Url;
use App\Models\Post;

name('home');

new class extends Component {
    public int $on_page = 10;
    public string $search = '';

    public function with(): array
    {
        return [
            'posts' => Post::with(['tags','media'])->latest()
            ->published()
            ->where('title', 'like', '%'.$this->search.'%')
            ->take($this->on_page)->get(),
        ];
    }

    public function loadMore(): void
    {
        $this->on_page += 10;
    }
}
?>

<x-app-layout>
    <x-slot:title>
        Home
    </x-slot:title>
    @volt
    <div>
        <div class="mb-3">
            <div class="search-form d-flex mt-0 border shadow-none">
                <input type="search" wire:model.live="search" id="search" name="search" class="form-control rounded" aria-label="Search" placeholder="Search">
                <button type="submit" class="btn btn-brand-primary py-0 px-2" aria-label="Search">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </div>
        @forelse ($posts as $post)
        <a href="{{ route('posts.show', ['slug' => $post->slug]) }}" wire:navigate class="text-decoration-none" aria-label="{{ $post->title }}">
            <article class="card border shadow-none mb-2">
                <div class="card-body">
                    @if ($post->getFirstMedia('posts'))
                    <img src="{{ $post->cover_url }}" alt="{{ $post->title }}" class="rounded img-fluid mb-3" />
                    @endif
                    <h2 class="text-base fw-semibold fs-4 text-dark pt-0" aria-describedby="articleDescription">{{ $post->title }}</h2>
                    <div class="mt-2 mb-4 text-dark">
                        <p id="articleDescription">
                            {{ $post->meta_description }}
                        </p>
                    </div>
                    <div class="mb-3">
                        @if($post->tags)
                            @foreach($post->tags as $tag)
                            <a href="{{ route('tags.show',['slug' => $tag->slug]) }}" wire:navigate class="small px-2 py-1 rounded bg-dark text-white me-1 text-decoration-none">
                                #{{ $tag->name }}
                            </a>
                            @endforeach
                        @endif
                    </div>
                </div>
            </article>
        </a>
        @empty
        <div class="alert alert-danger text-center" role="alert">
            <strong>
                No posts found.
            </strong>
        </div>
        @endforelse
        @if($posts->count() >= $on_page)
            <div x-intersect.full="$wire.loadMore()" class="p-4">
                <div wire:loading wire:target="loadMore">
                    <div class="text-light-emphasis text-center">
                        Loading....
                    </div>
                </div>
            </div>
        @endif
    </div>
    @endvolt
</x-app-layout>

When the data increases by 2 data, an error like this appears in the console:

[marius-mcp]

Hi.

  ->where('title', 'like', '%'.$this->search.'%')             // this you should think of refactoring into full text search
        ->take($this->on_page)->get(),            // I would use cursor not paginate via pages.

[Sophist-UK]

I think that there are two possibilities here:

1. That only 2 entries are sent in the Livewire "more" response, and this causes the Livewire JS exception because it is expecting more; or
2. Actually 10 entries are sent in the Livewire response but for some reason they are not being displayed because of the exception (though since Livewire works by sending HTML and all that JS does is to add it to the DOM this seems unliekly).

Either one seems to me to be a bug of some sort.

I would start by:

a. Examining the Livewire response to see what was sent; and
b. Trying to work out why there is a JS exception.