Skip to content

Commit

Permalink
Lazy loading implemented for backend tables
Browse files Browse the repository at this point in the history
  • Loading branch information
alimranahmed committed Sep 11, 2024
1 parent 1b9a5e5 commit 0fefddd
Show file tree
Hide file tree
Showing 17 changed files with 158 additions and 40 deletions.
19 changes: 12 additions & 7 deletions app/Livewire/Backend/Article/Index.php
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,6 @@ class Index extends Component

protected $listeners = ['articleDeleted' => '$refresh'];

public function render(): View
{
$articles = $this->getArticles();

return view('livewire.backend.article.index', compact('articles'));
}

private function getArticles()
{
$articles = Article::notDeleted()
Expand All @@ -55,4 +48,16 @@ private function getArticles()

return $articles->paginate(config('blog.item_per_page'));
}

public function placeholder(): View
{
return view('livewire.placeholders.list');
}

public function render(): View
{
$articles = $this->getArticles();

return view('livewire.backend.article.index', compact('articles'));
}
}
19 changes: 12 additions & 7 deletions app/Livewire/Backend/Category/Index.php
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,6 @@ class Index extends Component

protected $listeners = ['categoryDeleted' => '$refresh'];

public function render(): View
{
$categories = $this->getCategories();

return view('livewire.backend.category.index', compact('categories'));
}

public function startAdding(): void
{
$this->adding = true;
Expand All @@ -45,4 +38,16 @@ protected function getCategories(): LengthAwarePaginator
->orderBy('name')
->paginate();
}

public function placeholder(): View
{
return view('livewire.placeholders.list');
}

public function render(): View
{
$categories = $this->getCategories();

return view('livewire.backend.category.index', compact('categories'));
}
}
19 changes: 12 additions & 7 deletions app/Livewire/Backend/Comment/Index.php
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,6 @@ class Index extends Component

protected $listeners = ['commentDeleted' => '$refresh'];

public function render(): View
{
$comments = $this->getComments();

return view('livewire.backend.comment.index', compact('comments'));
}

private function getComments(): LengthAwarePaginator
{
$commentQuery = Comment::with('article', 'user', 'replies')
Expand All @@ -45,4 +38,16 @@ private function getComments(): LengthAwarePaginator

return $commentQuery->paginate(config('blog.item_per_page'));
}

public function placeholder(): View
{
return view('livewire.placeholders.list');
}

public function render(): View
{
$comments = $this->getComments();

return view('livewire.backend.comment.index', compact('comments'));
}
}
19 changes: 12 additions & 7 deletions app/Livewire/Backend/User/Index.php
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,6 @@ class Index extends Component
{
use WithPagination;

public function render(): View
{
$users = User::with('roles')->latest()->paginate(config('blog.item_per_page'));

return view('livewire.backend.user.index', compact('users'));
}

public function toggleActive(User $user): void
{
$user->update(['is_active' => ! $user->is_active]);
Expand All @@ -31,4 +24,16 @@ public function delete(User $user): void
}
$user->delete();
}

public function placeholder(): View
{
return view('livewire.placeholders.list');
}

public function render(): View
{
$users = User::with('roles')->latest()->paginate(config('blog.item_per_page'));

return view('livewire.backend.user.index', compact('users'));
}
}
1 change: 0 additions & 1 deletion public/build/assets/app-C3mYdTDq.css

This file was deleted.

1 change: 1 addition & 0 deletions public/build/assets/app-DeDjR0Uu.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/build/manifest.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"resources/css/app.css": {
"file": "assets/app-C3mYdTDq.css",
"file": "assets/app-DeDjR0Uu.css",
"src": "resources/css/app.css",
"isEntry": true
},
Expand Down
2 changes: 1 addition & 1 deletion resources/views/backend/articles/index.blade.php
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<x-backend>
<livewire:backend.article.index/>
<livewire:backend.article.index lazy/>
</x-backend>
2 changes: 1 addition & 1 deletion resources/views/backend/categories/index.blade.php
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<x-backend>
<livewire:backend.category.index/>
<livewire:backend.category.index lazy/>
</x-backend>
2 changes: 1 addition & 1 deletion resources/views/backend/comments/index.blade.php
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<x-backend>
<livewire:backend.comment.index/>
<livewire:backend.comment.index lazy/>
</x-backend>
2 changes: 1 addition & 1 deletion resources/views/backend/users/index.blade.php
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<x-backend>
<livewire:backend.user.index/>
<livewire:backend.user.index lazy/>
</x-backend>
2 changes: 1 addition & 1 deletion resources/views/components/backend/table.blade.php
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="mt-8 flow-root">
<div {{$attributes->merge(['class' => 'mt-8 flow-root'])}}>
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
Expand Down
8 changes: 4 additions & 4 deletions resources/views/livewire/backend/article/index.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<div class="sm:flex-auto">
<h1 class="text-base font-semibold leading-6 text-gray-900">Articles</h1>
<form class="mt-3">
<x-backend.form.input name="query" wire:model.debounce="query" placeholder="Search article" autofocus/>
<select name="category" wire:model.lazy="category" aria-label="Category"
<x-backend.form.input name="query" wire:model.live="query" placeholder="Search article" autofocus/>
<select name="category" wire:model.live.change="category" aria-label="Category"
class="p-1 border border-indigo-300 rounded focus:outline-none focus:border-indigo-500">
<option value="">All categories</option>
@foreach($navCategories as $category)
Expand All @@ -24,12 +24,12 @@ class="p-1 border border-indigo-300 rounded focus:outline-none focus:border-indi
</div>
</section>

<x-backend.table>
<x-backend.table wire:loading.class="opacity-50 cursor-wait">
<x-slot name="head">
<tr>
<x-backend.table.th>Title</x-backend.table.th>
<x-backend.table.th>Publication</x-backend.table.th>
<x-backend.table.th>Operations</x-backend.table.th>
<x-backend.table.th></x-backend.table.th>
</tr>
</x-slot>

Expand Down
8 changes: 7 additions & 1 deletion resources/views/livewire/backend/comment/index.blade.php
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
<div wire:loading.class="opacity-50">
<div>
<div class="sm:flex sm:items-center">
<div class="sm:flex-auto">
<h1 class="text-base font-semibold leading-6 text-gray-900">Comments</h1>
<p class="mt-2 text-sm text-gray-700">A list of all the comments.</p>
</div>
</div>
<x-backend.table>
<x-slot name="head">
<tr>
Expand Down
18 changes: 18 additions & 0 deletions resources/views/livewire/placeholders/article.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@

<div role="status" class="space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center">
<div class="flex items-center justify-center w-full h-48 bg-gray-300 rounded sm:w-96 dark:bg-gray-700">
<svg class="w-10 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
<path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
</svg>
</div>
<div class="w-full">
<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[480px] mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[440px] mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[460px] mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
</div>
<span class="sr-only">Loading...</span>
</div>

11 changes: 11 additions & 0 deletions resources/views/livewire/placeholders/default.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@

<div role="status" class="max-w-sm animate-pulse">
<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[330px] mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[300px] mb-2.5"></div>
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
<span class="sr-only">Loading...</span>
</div>

63 changes: 63 additions & 0 deletions resources/views/livewire/placeholders/list.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<div class="animate-pulse">
<!-- Header Skeleton -->
<div class="sm:flex sm:items-center">
<div class="sm:flex-auto">
<div class="h-4 bg-gray-300 rounded w-1/4 mb-2"></div>
<div class="h-3 bg-gray-300 rounded w-1/3"></div>
</div>
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
<div class="h-8 bg-gray-300 rounded w-32"></div>
</div>
</div>

<!-- Table Skeleton -->
<x-backend.table>
<x-slot name="head">
<tr>
<th class="px-4 py-2">
<div class="h-4 bg-gray-300 rounded w-64"></div>
</th>
<th class="px-4 py-2 flex">
<div class="h-4 bg-gray-300 rounded w-16"></div>
</th>
<th class="px-4 py-2"></th>
</tr>
</x-slot>

<x-slot name="body">
<!-- Skeleton rows -->
@for ($i = 0; $i < 3; $i++)
<tr>
<!-- User info skeleton -->
<td class="p-4">
<div class="h-4 bg-gray-300 rounded w-1/2 mb-2"></div>
<div class="h-3 bg-gray-300 rounded w-1/4 mb-1"></div>
<div class="h-3 bg-gray-300 rounded w-1/3 mb-1"></div>
<div class="h-3 bg-gray-300 rounded w-1/2"></div>
</td>

<!-- Status skeleton -->
<td class="p-4">
<div class="flex">
<div class="h-6 w-10 bg-gray-300 rounded-full"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-3"></div>
<div class="h-4 bg-gray-300 rounded w-1/4 ml-3"></div>
</div>
</td>

<!-- Actions skeleton -->
<td class="p-4 flex justify-end">
<div class="h-4 bg-gray-300 rounded w-10 mb-1 mr-3"></div>
<div class="h-4 bg-gray-300 rounded w-10"></div>
</td>
</tr>
@endfor
</x-slot>
</x-backend.table>

<!-- Pagination skeleton -->
<div class="mt-3 flex justify-between w-full">
<div class="h-2 bg-gray-300 rounded w-60"></div>
<div class="h-8 bg-gray-300 rounded w-32"></div>
</div>
</div>

0 comments on commit 0fefddd

Please sign in to comment.