From c06a8210088af1f4b4c054ecfbb61b4f9ef53954 Mon Sep 17 00:00:00 2001
From: sundayenglish <quyetluu217@gmail.com>
Date: Tue, 24 Jun 2025 14:36:10 +0700
Subject: [PATCH] Add loading Permission

---
 public/css/skeleton.css                       |  33 ++++++
 .../components/permission/manager.blade.php   | 112 +++++++++++++-----
 resources/views/layouts/app.blade.php         |   3 +-
 3 files changed, 118 insertions(+), 30 deletions(-)
 create mode 100644 public/css/skeleton.css

diff --git a/public/css/skeleton.css b/public/css/skeleton.css
new file mode 100644
index 0000000..b8a9984
--- /dev/null
+++ b/public/css/skeleton.css
@@ -0,0 +1,33 @@
+/* public/css/skeleton.css */
+
+/* 1. Định nghĩa keyframes cho shimmer */
+@keyframes shimmer {
+  0%   { transform: translateX(0%); }
+  100% { transform: translateX(100%); }
+}
+
+/* 2. Lớp base cho skeleton */
+.skeleton {
+  position: relative;
+  overflow: hidden;
+  background-color: #e2e2e2;
+}
+
+/* 3. Pseudo-element để tạo shimmer */
+.skeleton::after {
+  content: "";
+  position: absolute;
+  top: 0; left: -150%;
+  width: 150%; height: 100%;
+  background: linear-gradient(
+    90deg,
+    rgba(255,255,255,0)    0%,
+    rgba(255,255,255,0.5) 50%,
+    rgba(255,255,255,0)   100%
+  );
+  animation: shimmer 1.5s infinite;
+}
+
+/* Tuỳ biến thêm nếu muốn */
+/* .skeleton.rounded { border-radius: .375rem; } */
+/* .skeleton-lg { height: 3.5rem; } */
diff --git a/resources/views/components/permission/manager.blade.php b/resources/views/components/permission/manager.blade.php
index 7b0510a..b399f45 100644
--- a/resources/views/components/permission/manager.blade.php
+++ b/resources/views/components/permission/manager.blade.php
@@ -1,9 +1,9 @@
 <div class="row">
     <div class="col-12">
         <div class="card mb-4">
+
             {{-- Header --}}
             <div class="card-header d-flex justify-content-between align-items-center pb-0">
-                {{-- Tiêu đề động --}}
                 <h6 class="mb-0">{{ $title }}</h6>
 
                 @if ($mode === 'index')
@@ -33,10 +33,47 @@
                 @endif
 
                 @if ($mode === 'index')
-                    <div class="table-responsive">
+                    {{-- SKELETON TABLE --}}
+                    <div wire:loading class="w-100">
+                        <div class="table-responsive">
+                            <table class="table mb-0">
+                                <thead>
+                                    <tr style="visibility:hidden; height:3.5rem">
+                                        <th class="text-center">ID</th>
+                                        <th>Name</th>
+                                        <th class="text-center">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    @for ($i = 0; $i < 5; $i++)
+                                        <tr style="height:3.5rem">
+                                            <td class="text-center align-middle">
+                                                <div class="skeleton rounded"
+                                                    style="width:2rem; height:2rem; margin:0 auto;"></div>
+                                            </td>
+                                            <td class="align-middle">
+                                                <div class="skeleton rounded" style="width:90%; height:1.75rem;"></div>
+                                            </td>
+                                            <td class="text-center align-middle">
+                                                <div class="d-inline-flex gap-3">
+                                                    <div class="skeleton rounded" style="width:3rem; height:2rem;">
+                                                    </div>
+                                                    <div class="skeleton rounded" style="width:3rem; height:2rem;">
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    @endfor
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    {{-- ACTUAL TABLE --}}
+                    <div wire:loading.remove class="table-responsive">
                         <table class="table align-items-center mb-0">
                             <thead>
-                                <tr>
+                                <tr style="height:3.5rem">
                                     <th class="text-center">ID</th>
                                     <th>Name</th>
                                     <th class="text-center">Actions</th>
@@ -44,10 +81,10 @@
                             </thead>
                             <tbody>
                                 @forelse($permissions as $p)
-                                    <tr>
-                                        <td class="text-center">{{ $p->id }}</td>
-                                        <td>{{ $p->name }}</td>
-                                        <td class="text-center">
+                                    <tr style="height:3.5rem">
+                                        <td class="text-center align-middle">{{ $p->id }}</td>
+                                        <td class="align-middle">{{ $p->name }}</td>
+                                        <td class="text-center align-middle">
                                             <button wire:click="showForm({{ $p->id }})"
                                                 class="btn btn-sm btn-outline-info me-1">
                                                 Edit
@@ -67,39 +104,56 @@
                         </table>
                     </div>
 
-                    {{-- Phân trang --}}
-                    <div class="mt-3">
+                    {{-- Pagination --}}
+                    <div wire:loading.remove class="mt-3">
                         @if ($permissions->lastPage() > 1)
                             {{ $permissions->links() }}
                         @endif
                     </div>
                 @else
-                    {{-- Form --}}
-                    <h6 class="mb-3">{{ $editingId ? 'Edit Permission' : 'Create Permission' }}</h6>
-                    <form wire:submit.prevent="save">
-                        <div class="mb-3">
-                            <label class="form-label">Name</label>
-                            <input type="text" wire:model.defer="name" class="form-control"
-                                placeholder="Enter permission name">
-                            @error('name')
-                                <div class="text-danger text-xs mt-1">{{ $message }}</div>
-                            @enderror
+                    {{-- SKELETON FORM --}}
+                    <div wire:loading class="w-100">
+                        <div class="p-4 border rounded-lg shadow-sm max-w-md mx-auto space-y-4">
+                            <div class="skeleton rounded" style="width:10rem; height:2rem;"></div>
+                            <div class="space-y-3">
+                                <div class="skeleton rounded" style="width:100%; height:3.5rem;"></div>
+                                <div class="skeleton rounded" style="width:95%; height:3.5rem;"></div>
+                            </div>
+                            <div class="d-flex justify-content-end gap-3">
+                                <div class="skeleton rounded" style="width:5.5rem; height:2.5rem;"></div>
+                                <div class="skeleton rounded" style="width:5.5rem; height:2.5rem;"></div>
+                            </div>
                         </div>
-                        <div class="d-flex justify-content-end">
-                            <button wire:click="showIndex" type="button" class="btn btn-secondary btn-sm me-2">
-                                Cancel
-                            </button>
-                            <button type="submit" class="btn btn-info btn-sm">
-                                {{ $editingId ? 'Update' : 'Create' }}
-                            </button>
-                        </div>
-                    </form>
+                    </div>
+
+                    {{-- ACTUAL FORM --}}
+                    <div wire:loading.remove>
+                        <h6 class="mb-3">{{ $editingId ? 'Edit Permission' : 'Create Permission' }}</h6>
+                        <form wire:submit.prevent="save">
+                            <div class="mb-3">
+                                <label class="form-label">Name</label>
+                                <input type="text" wire:model.defer="name" class="form-control"
+                                    placeholder="Enter permission name">
+                                @error('name')
+                                    <div class="text-danger text-xs mt-1">{{ $message }}</div>
+                                @enderror
+                            </div>
+                            <div class="d-flex justify-content-end">
+                                <button wire:click="showIndex" type="button" class="btn btn-secondary btn-sm me-2">
+                                    Cancel
+                                </button>
+                                <button type="submit" class="btn btn-info btn-sm">
+                                    {{ $editingId ? 'Update' : 'Create' }}
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+
                 @endif
             </div>
         </div>
     </div>
 
-    {{-- Livewire sẽ chèn và chạy block này sau mỗi lần component render xong --}}
     @script
         <script>
             document.title = @json($title);
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index d853716..c39eb28 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -21,7 +21,8 @@
 
     {{-- CSS --}}
     <link id="pagestyle" href="{{ asset('soft-ui/assets/css/soft-ui-dashboard.css?v=1.1.0') }}" rel="stylesheet">
-
+    <link href="{{ asset('css/skeleton.css') }}" rel="stylesheet">
+    
     {{-- Livewire Styles --}}
     @livewireStyles