infinite-posts.blade.php

<div class="container p-4 mx-auto">
    <h1 class="text-2xl text-gray-900">Infinite Load Posts</h1>

    <div class="grid grid-cols-1 gap-8 mt-4 md:grid-cols-1 lg:grid-cols-1">
        @foreach($posts as $post)
            <a href="#" class="block p-4 overflow-hidden bg-white rounded shadow-sm hover:shadow" :key="$post['id']">
                <h1 class="text-lg text-gray-800 truncate">
                    {{ $post['title'] }}
                </h1>

                <p class="text-gray-900">
                    {{ $post['content'] }}
                </p>
            </a>
        @endforeach
        @if($hasMorePages)
            <button wire:click.prevent="loadPosts">Load post</button>
        @endif
    </div>

    @if($hasMorePages)
        <div
            x-data="{
                init () {
                    let observer = new IntersectionObserver((entries) => {
                        entries.forEach(entry => {
                            if (entry.isIntersecting) {
                                @this.call('loadPosts')
                            }
                        })
                    }, {
                        root: null
                    });
                    observer.POLL_INTERVAL = 100
                    observer.observe(this.$el);
                }
            }"
            class="grid grid-cols-1 gap-8 mt-4 md:grid-cols-1 lg:grid-cols-1"
        >
        </div>
    @endif
</div>