Learn how to implement a "Load More" blog post feature using Laravel Livewire to enhance user experience with dynamic content loading. This tutorial walks you through creating a Livewire component that fetches blog posts in batches, displays them in a responsive layout, and disables the load more button when all posts are loaded. Ideal for improving performance and maintaining a clean UI without page reloads. Perfect for Laravel developers looking to replace traditional pagination with a modern and interactive approach. Follow the step-by-step guide to seamlessly integrate this feature into your blog or content-driven application.

📌 Steps to Implement Load More Blog Posts Using Laravel Livewire

Step 1: Create

Livewire Component
Use Artisan to generate the component:

php artisan make:livewire frontend.blog-list

Step 2: Update the Livewire Component Logic (BlogList.php)

    use WithPagination;
    public $perPage = 3;
    protected $paginationTheme = 'bootstrap';

    public $loadedAll = false;
    public function loadMore()
    {
        $totalCount = Blog::count();
        $this->perPage += 5;

        if ($this->perPage >= $totalCount) {
            $this->loadedAll = true;
        }
    }
    public function loadMore2()
    {
        $this->perPage += 1;
        $this->dispatch('scroll-to-bottom');
    }

    public function render()
    {
        $blogs = Blog::latest()->take($this->perPage)->get();

        return view('livewire.frontend.blog-list', [
            'blogs' => $blogs
        ]);
    }

Step 3: Create the Blade View (blog-list.blade.php)

                    @if ($blogs->hasMorePages())
                        <div class="text-center my-4">
                            <button wire:click.prevent="loadMore" wire:loading.attr="disabled" wire:target="loadMore" class="btn btn-primary px-4 py-2 text-white rounded">
                                <span wire:loading.remove wire:target="loadMore">
                                    Load More
                                </span>
                                <span wire:target="loadMore" wire:loading.class.remove="d-none" wire:loading.class="d-block" class="d-none" wire:target="loadMore">
                                    Loading...
                                </span>
                            </button>
                        </div>
                    

 <script>
        window.addEventListener('scroll-to-bottom', () => {
            setTimeout(() => {
                const section = document.getElementById('blog-section');
                if (section) {
                    section.scrollIntoView({
                        behavior: 'smooth',
                        block: 'end' // scrolls to the bottom of the section
                    });
                }
            }, 1000);

        });
    </script>

@endif


                        @if (!$loadedAll)
                            <div class="text-center mt-3">
                                <button wire:click="loadMore" wire:loading.attr="disabled" class="btn btn-outline-primary">
                                    <span wire:loading.remove>Load More</span>
                                    <span wire:loading>Loading...</span>
                                </button>
                            </div>
                        @else
                            <div class="text-center mt-3 text-muted">
                                <small>All blogs loaded.</small>
                            </div>
                        @endif

Step 4: Use the Component in Your Page

Include it in your desired Blade file:

<livewire:frontend.blog-list />