Aug 9, 2024
0
Level 5
Pagination is slow after migrating to livewire3
Hello,
It taks like 4 or 5 seconds to render from one page to another, i did cleared cache and used different paginte or simplePaginate in my component but still the same BlogList component
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Blog;
use Hashids\Hashids;
class BlogList extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public function render()
{
$hash = new Hashids('', 10);
$blogs = Blog::paginate(6);
// $blogs = Blog::simplePaginate(6);
// $blogs = Blog::cursorPaginate(6);
//$blogs = Blog::latest()->simplePaginate(6);
return view('livewire.blog-list',compact('blogs','hash'));
}
}
in blog-list view
<div>
<!-- Blog -->
<section class="blog-area three ptb-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
@if($blogs && $blogs-> count() > 0)
@foreach ($blogs as $blog)
<div class="col-md-6 col-sm-6 col-lg-4">
<div class="blog-item">
<div class="top">
<a target="_blank" href="{{ $blog->photo}}">
<img src="{{ $blog->photo}}" alt="blog" style="width: 510; height:450" title="{{ $blog->title}}" alt="{{ $blog->title}}">
</a>
</div>
<div class="bottom">
<ul>
<li>
<i class="icofont-calendar"></i>
<span>{{ Date::parse($blog->created_at) ? Date::parse($blog->created_at)->diffForHumans() : ''}}</span>
</li>
<li>
<i class="icofont-user-alt-3"></i>
<span>{{ trans('front/message.By') }}:</span>
<a href="#">{{ $blog->user->name}}</a>
</li>
</ul>
<h3>
<a href="{{ url('blog/details/'.str_replace_me($blog->title).'/'.$hash->encodeHex($blog->id))}}" title="{{ $blog->title}}">{{ $blog->title}}</a>
</h3>
<p>{{ $blog->short_description }}</p>
<a class="blog-btn" href="{{ url('blog/details/'.str_replace_me($blog->title).'/'.$hash->encodeHex($blog->id))}}" title="{{ $blog->title}}">{{ trans('front/message.Read More') }}</a>
</div>
</div>
</div>
@endforeach
@endif
</div>
<div class="pagination-area">
<ul>
<li>
{{ $blogs->links('vendor.livewire.simple-bootstrap') }}
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- End Blog -->
</div>
I appreciate much your help
Please or to participate in this conversation.