Pastebin | Laravel.io

//routes/web.php

Route::get('/items', function() {
    return view('items');
});

//resources/views/items.blade.php

@extends('layouts.app')

@section('content')
    <h1 class="text-3xl font-extrabold text-gray-900 tracking-tight">Items</h1>

<livewire:load-items perPage="10" page="1" />

@endsection

//App\Http\Livewire\LoadItems.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Item;

class LoadItems extends Component
{
    public $perPage;
    public $page;

public function mount($page, $perPage) 
    {
        $this->page = $page ?? 1;
        $this->perPage = $perPage ?? 10;
    }
    public function render()
    {
        $results = Item::paginate($this->perPage, ['*'], null, $this->page);
        return view('livewire.load-items', [
            'results' => $results
        ]);
    }
}

//App\Http\Livewire\LoadMoreItems.php
<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Item;

class LoadMoreItems extends Component
{
    public $page;
    public $perPage;
    private $loadMore = false;

protected $listeners = ['loadMoreItems'];

public function mount($page, $perPage) 
    {
        $this->page = $page ?? 1;
        $this->perPage = $perPage ?? 10;
    }

public function loadMoreItems() 
    {
        $this->loadMore = true;
        $this->page += 1;
    }

public function render()
    {
        if( $this->loadMore) {
            $results = Item::paginate($this->perPage, ['*'], null, $this->page);
            return view('livewire.load-items', [
                'results' => $results
            ]);
        } else {
            return view('livewire.load-more-items');
        }
    }
}

//resources/views/livewire/load-items.blade.php
<div>
    <p class="font-bold">Time is {{ time() }}</p>
    <ul>    
    @foreach($results as $result)
        <li class="mt-4 border-b-2 p-4">{{$result->id}}: {{$result->name}}</li}>
    @endforeach
    </ul>

@if($results->hasMorePages())
        <livewire:load-more-items :page="$page" :perPage="$perPage" :key="'load-more-items-'.$page" />
    @endif
</div>

//resources/views/livewire/load-more-items.blade.php
<div>
    <button wire:click="$emitSelf('loadMoreItems')" class="bg-red-500 px-4 py-2">
        <div wire:loading.delay>
            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
        </div>
        Load More Items
    </button>
</div>