From 7ef01a2ae77b5270e13bd5fa8a5c7e8a40898062 Mon Sep 17 00:00:00 2001
From: Purvesh <ind.purvesh@gmail.com>
Date: Fri, 13 Nov 2026 21:10:35 +1300
Subject: [PATCH] ui improvements

---
 .../pages/admin/api_key/api_key_index_page.rs | 36 +++++++++++----
 .../collections/collection_index_page.rs      | 35 +++++++++++----
 .../admin/email/email_template_index_page.rs  | 33 ++++++++++----
 .../pages/admin/entity/entity_index_page.rs   | 44 ++++++++++++++++---
 .../admin/workflow/workflow_index_page.rs     | 34 ++++++++++----
 5 files changed, 139 insertions(+), 43 deletions(-)

diff --git a/crates/avored-web/src/interfaces/web/pages/admin/api_key/api_key_index_page.rs b/crates/avored-web/src/interfaces/web/pages/admin/api_key/api_key_index_page.rs
index 3de6f4ce..aef547c7 100644
--- a/crates/avored-web/src/interfaces/web/pages/admin/api_key/api_key_index_page.rs
+++ b/crates/avored-web/src/interfaces/web/pages/admin/api_key/api_key_index_page.rs
@@ -50,6 +50,18 @@ pub fn ApiKeyIndexPage() -> impl IntoView {
                                     <th scope="col" class="px-5 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500 sm:px-6">"Actions"</th>
                                 </tr>
                             </thead>
+                            <tbody x-show="loading" class="divide-y divide-slate-100 bg-white">
+                                <template x-for="i in 3" x-bind:key="i">
+                                    <tr class="animate-pulse">
+                                        <td class="whitespace-nowrap px-5 py-4 sm:px-6"><div class="h-4 w-28 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-4 w-20 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-6 w-20 rounded-md bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-4 w-24 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-4 w-24 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4 text-right sm:px-6"><div class="ml-auto h-9 w-20 rounded-lg bg-slate-200"></div></td>
+                                    </tr>
+                                </template>
+                            </tbody>
                             <tbody x-show="!loading && keys.length > 0" class="divide-y divide-slate-100 bg-white">
                                 <template x-for="key in keys" x-bind:key="key.id">
                                     <tr class="transition hover:bg-slate-50">
@@ -66,16 +78,22 @@ pub fn ApiKeyIndexPage() -> impl IntoView {
                                             <div class="flex items-center justify-end gap-2">
                                                 <a
                                                     x-bind:href="`/admin/api-keys/${key.id}/edit`"
-                                                    class="inline-flex items-center rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-700 shadow-sm transition hover:bg-slate-50"
+                                                    aria-label="Edit API key"
+                                                    title="Edit API key"
+                                                    class="inline-flex items-center justify-center rounded-md border border-slate-300 bg-white p-2 text-slate-700 shadow-sm transition hover:bg-slate-50"
                                                 >
-                                                    "Edit"
+                                                    <i data-feather="edit-3" class="h-4 w-4"></i>
+                                                    <span class="sr-only">"Edit"</span>
                                                 </a>
                                                 <button
                                                     type="button"
                                                     x-on:click="confirmDelete(key)"
-                                                    class="inline-flex items-center rounded-md border border-red-200 bg-red-50 px-2.5 py-1.5 text-xs font-medium text-red-700 shadow-sm transition hover:bg-red-100"
+                                                    aria-label="Delete API key"
+                                                    title="Delete API key"
+                                                    class="inline-flex items-center justify-center rounded-md border border-red-200 bg-red-50 p-2 text-red-700 shadow-sm transition hover:bg-red-100"
                                                 >
-                                                    "Delete"
+                                                    <i data-feather="trash-2" class="h-4 w-4"></i>
+                                                    <span class="sr-only">"Delete"</span>
                                                 </button>
                                             </div>
                                         </td>
@@ -106,22 +124,22 @@ pub fn ApiKeyIndexPage() -> impl IntoView {
                                 type="button"
                                 x-on:click="previousPage()"
                                 x-bind:disabled="page <= 1 || loading"
-                                class="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                class="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-100 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400"
                             >
                                 <i data-feather="chevron-left" class="h-4 w-4"></i>
                                 "Previous"
                             </button>
-                            <span class="px-2 text-xs text-slate-500">
+                            <span class="px-2 text-xs text-slate-600">
                                 "Page "
-                                <span class="font-medium text-slate-700" x-text="page"></span>
+                                <span class="font-semibold text-slate-800" x-text="page"></span>
                                 " of "
-                                <span class="font-medium text-slate-700" x-text="totalPages()"></span>
+                                <span class="font-semibold text-slate-800" x-text="totalPages()"></span>
                             </span>
                             <button
                                 type="button"
                                 x-on:click="nextPage()"
                                 x-bind:disabled="page >= totalPages() || loading"
-                                class="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                class="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-100 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400"
                             >
                                 "Next"
                                 <i data-feather="chevron-right" class="h-4 w-4"></i>
diff --git a/crates/avored-web/src/interfaces/web/pages/admin/collections/collection_index_page.rs b/crates/avored-web/src/interfaces/web/pages/admin/collections/collection_index_page.rs
index 4c5cc66f..9c29bbc2 100644
--- a/crates/avored-web/src/interfaces/web/pages/admin/collections/collection_index_page.rs
+++ b/crates/avored-web/src/interfaces/web/pages/admin/collections/collection_index_page.rs
@@ -100,6 +100,17 @@ pub fn CollectionIndexPage() -> impl IntoView {
                                                 <th scope="col" class="px-4 py-3 text-right">"Actions"</th>
                                             </tr>
                                         </thead>
+                                        <tbody x-show="loading" class="divide-y divide-slate-100 bg-white">
+                                            <template x-for="i in 3" x-bind:key="i">
+                                                <tr class="animate-pulse">
+                                                    <td class="whitespace-nowrap px-4 py-3"><div class="h-4 w-12 rounded bg-slate-200"></div></td>
+                                                    <template x-for="attr in (currentEntity ? currentEntity.attributes : [])" x-bind:key="attr.id">
+                                                        <td class="whitespace-nowrap px-4 py-3"><div class="h-4 w-24 rounded bg-slate-200"></div></td>
+                                                    </template>
+                                                    <td class="whitespace-nowrap px-4 py-3 text-right"><div class="ml-auto h-8 w-16 rounded-md bg-slate-200"></div></td>
+                                                </tr>
+                                            </template>
+                                        </tbody>
                                         <tbody x-show="!loading && collections.length > 0" class="divide-y divide-slate-100 bg-white">
                                             <template x-for="(item, index) in collections" x-bind:key="getAttributeValue(item, 'id') || index">
                                                 <tr class="transition hover:bg-slate-50">
@@ -113,16 +124,22 @@ pub fn CollectionIndexPage() -> impl IntoView {
                                                         <div class="flex items-center justify-end gap-2">
                                                             <a
                                                                 x-bind:href="`/admin/collections/${getAttributeValue(item, 'id')}/edit?entity_id=${selectedEntityId}`"
-                                                                class="inline-flex items-center rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-700 shadow-sm transition hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
+                                                                aria-label="Edit collection record"
+                                                                title="Edit collection record"
+                                                                class="inline-flex items-center justify-center rounded-md border border-slate-300 bg-white p-2 text-slate-700 shadow-sm transition hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
                                                             >
-                                                                "Edit"
+                                                                <i data-feather="edit-3" class="h-4 w-4"></i>
+                                                                <span class="sr-only">"Edit"</span>
                                                             </a>
                                                             <button
                                                                 type="button"
                                                                 x-on:click="confirmDelete(item)"
-                                                                class="inline-flex items-center rounded-md border border-red-200 bg-red-50 px-2.5 py-1.5 text-xs font-medium text-red-700 shadow-sm transition hover:bg-red-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+                                                                aria-label="Delete collection record"
+                                                                title="Delete collection record"
+                                                                class="inline-flex items-center justify-center rounded-md border border-red-200 bg-red-50 p-2 text-red-700 shadow-sm transition hover:bg-red-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
                                                             >
-                                                                "Delete"
+                                                                <i data-feather="trash-2" class="h-4 w-4"></i>
+                                                                <span class="sr-only">"Delete"</span>
                                                             </button>
                                                         </div>
                                                     </td>
@@ -166,21 +183,21 @@ pub fn CollectionIndexPage() -> impl IntoView {
                                             type="button"
                                             x-on:click="previousPage()"
                                             x-bind:disabled="page <= 1 || loading"
-                                            class="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 shadow-xs hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                            class="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-700 shadow-xs hover:bg-slate-100 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400"
                                         >
                                             "Previous"
                                         </button>
-                                        <span class="px-2 text-xs text-slate-500">
+                                        <span class="px-2 text-xs text-slate-600">
                                             "Page "
-                                            <span class="font-medium text-slate-700" x-text="page"></span>
+                                            <span class="font-semibold text-slate-800" x-text="page"></span>
                                             " of "
-                                            <span class="font-medium text-slate-700" x-text="totalPages()"></span>
+                                            <span class="font-semibold text-slate-800" x-text="totalPages()"></span>
                                         </span>
                                         <button
                                             type="button"
                                             x-on:click="nextPage()"
                                             x-bind:disabled="page >= totalPages() || loading"
-                                            class="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 shadow-xs hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                            class="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-700 shadow-xs hover:bg-slate-100 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400"
                                         >
                                             "Next"
                                         </button>
diff --git a/crates/avored-web/src/interfaces/web/pages/admin/email/email_template_index_page.rs b/crates/avored-web/src/interfaces/web/pages/admin/email/email_template_index_page.rs
index 7c5a753d..6c83c736 100644
--- a/crates/avored-web/src/interfaces/web/pages/admin/email/email_template_index_page.rs
+++ b/crates/avored-web/src/interfaces/web/pages/admin/email/email_template_index_page.rs
@@ -48,6 +48,17 @@ pub fn EmailTemplateIndexPage() -> impl IntoView {
                                     <th scope="col" class="px-5 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500 sm:px-6">"Actions"</th>
                                 </tr>
                             </thead>
+                            <tbody x-show="loading" class="divide-y divide-slate-100 bg-white">
+                                <template x-for="i in 3" x-bind:key="i">
+                                    <tr class="animate-pulse">
+                                        <td class="whitespace-nowrap px-5 py-4 sm:px-6"><div class="h-4 w-28 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-4 w-36 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-4 w-24 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-4 w-24 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4 text-right sm:px-6"><div class="ml-auto h-9 w-20 rounded-lg bg-slate-200"></div></td>
+                                    </tr>
+                                </template>
+                            </tbody>
                             <tbody x-show="!loading && templates.length > 0" class="divide-y divide-slate-100 bg-white">
                                 <template x-for="template in templates" x-bind:key="template.id">
                                     <tr class="transition hover:bg-slate-50">
@@ -61,18 +72,22 @@ pub fn EmailTemplateIndexPage() -> impl IntoView {
                                             <div class="flex items-center justify-end gap-2">
                                                 <a
                                                     x-bind:href="`/admin/email-templates/${template.id}/edit`"
-                                                    class="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
+                                                    aria-label="Edit template"
+                                                    title="Edit template"
+                                                    class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white p-2 text-slate-700 transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
                                                 >
                                                     <i data-feather="edit-3" class="h-4 w-4"></i>
-                                                    "Edit"
+                                                    <span class="sr-only">"Edit"</span>
                                                 </a>
                                                 <button
                                                     type="button"
                                                     x-on:click="confirmDelete(template)"
-                                                    class="inline-flex items-center justify-center gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-medium text-red-700 transition hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+                                                    aria-label="Delete template"
+                                                    title="Delete template"
+                                                    class="inline-flex items-center justify-center rounded-lg border border-red-200 bg-red-50 p-2 text-red-700 transition hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                                                 >
                                                     <i data-feather="trash-2" class="h-4 w-4"></i>
-                                                    "Delete"
+                                                    <span class="sr-only">"Delete"</span>
                                                 </button>
                                             </div>
                                         </td>
@@ -96,22 +111,22 @@ pub fn EmailTemplateIndexPage() -> impl IntoView {
                                 type="button"
                                 x-on:click="previousPage()"
                                 x-bind:disabled="page <= 1 || loading"
-                                class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-slate-50 px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400"
                             >
                                 <i data-feather="chevron-left" class="h-4 w-4"></i>
                                 "Previous"
                             </button>
-                            <span class="px-2 text-sm text-slate-500">
+                            <span class="px-2 text-sm text-slate-600">
                                 "Page "
-                                <span class="font-medium text-slate-700" x-text="page"></span>
+                                <span class="font-semibold text-slate-800" x-text="page"></span>
                                 " of "
-                                <span class="font-medium text-slate-700" x-text="totalPages()"></span>
+                                <span class="font-semibold text-slate-800" x-text="totalPages()"></span>
                             </span>
                             <button
                                 type="button"
                                 x-on:click="nextPage()"
                                 x-bind:disabled="page >= totalPages() || loading"
-                                class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-slate-50 px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400"
                             >
                                 "Next"
                                 <i data-feather="chevron-right" class="h-4 w-4"></i>
diff --git a/crates/avored-web/src/interfaces/web/pages/admin/entity/entity_index_page.rs b/crates/avored-web/src/interfaces/web/pages/admin/entity/entity_index_page.rs
index 2c9651b5..a9820e13 100644
--- a/crates/avored-web/src/interfaces/web/pages/admin/entity/entity_index_page.rs
+++ b/crates/avored-web/src/interfaces/web/pages/admin/entity/entity_index_page.rs
@@ -51,6 +51,17 @@ pub fn EntityIndexPage() -> impl IntoView {
                                     <th scope="col" class="px-5 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500 sm:px-6">"Actions"</th>
                                 </tr>
                             </thead>
+                            <tbody x-show="loading" class="divide-y divide-slate-100 bg-white">
+                                <template x-for="i in 3" x-bind:key="i">
+                                    <tr class="animate-pulse">
+                                        <td class="whitespace-nowrap px-5 py-4 sm:px-6"><div class="h-4 w-28 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-4 w-32 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-4 w-24 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-4 w-24 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4 text-right sm:px-6"><div class="ml-auto h-9 w-20 rounded-lg bg-slate-200"></div></td>
+                                    </tr>
+                                </template>
+                            </tbody>
                             <tbody x-show="!loading && entities.length > 0" class="divide-y divide-slate-100 bg-white">
                                 <template x-for="entity in entities" x-bind:key="entity.id">
                                     <tr class="transition hover:bg-slate-50">
@@ -62,8 +73,27 @@ pub fn EntityIndexPage() -> impl IntoView {
                                         <td class="whitespace-nowrap px-5 py-4 text-sm text-slate-500" x-text="formatDate(entity.created_at)"></td>
                                         <td class="whitespace-nowrap px-5 py-4 text-sm text-slate-500" x-text="formatDate(entity.updated_at)"></td>
                                         <td class="whitespace-nowrap px-5 py-4 text-right text-sm sm:px-6">
-                                            <a x-bind:href="`/admin/entity/${entity.id}/edit`" class="font-medium text-primary-600 hover:text-primary-800">"Edit"</a>
-                                            <button type="button" x-on:click="confirmDelete(entity)" class="ml-4 font-medium text-red-600 hover:text-red-800">"Delete"</button>
+                                            <div class="flex items-center justify-end gap-2">
+                                                <a
+                                                    x-bind:href="`/admin/entity/${entity.id}/edit`"
+                                                    aria-label="Edit entity"
+                                                    title="Edit entity"
+                                                    class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white p-2 text-slate-700 transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
+                                                >
+                                                    <i data-feather="edit-3" class="h-4 w-4"></i>
+                                                    <span class="sr-only">"Edit"</span>
+                                                </a>
+                                                <button
+                                                    type="button"
+                                                    x-on:click="confirmDelete(entity)"
+                                                    aria-label="Delete entity"
+                                                    title="Delete entity"
+                                                    class="inline-flex items-center justify-center rounded-lg border border-red-200 bg-red-50 p-2 text-red-700 transition hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+                                                >
+                                                    <i data-feather="trash-2" class="h-4 w-4"></i>
+                                                    <span class="sr-only">"Delete"</span>
+                                                </button>
+                                            </div>
                                         </td>
                                     </tr>
                                 </template>
@@ -85,22 +115,22 @@ pub fn EntityIndexPage() -> impl IntoView {
                                 type="button"
                                 x-on:click="previousPage()"
                                 x-bind:disabled="page <= 1 || loading"
-                                class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-slate-50 px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400"
                             >
                                 <i data-feather="chevron-left" class="h-4 w-4"></i>
                                 "Previous"
                             </button>
-                            <span class="px-2 text-sm text-slate-500">
+                            <span class="px-2 text-sm text-slate-600">
                                 "Page "
-                                <span class="font-medium text-slate-700" x-text="page"></span>
+                                <span class="font-semibold text-slate-800" x-text="page"></span>
                                 " of "
-                                <span class="font-medium text-slate-700" x-text="totalPages()"></span>
+                                <span class="font-semibold text-slate-800" x-text="totalPages()"></span>
                             </span>
                             <button
                                 type="button"
                                 x-on:click="nextPage()"
                                 x-bind:disabled="page >= totalPages() || loading"
-                                class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-slate-50 px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400"
                             >
                                 "Next"
                                 <i data-feather="chevron-right" class="h-4 w-4"></i>
diff --git a/crates/avored-web/src/interfaces/web/pages/admin/workflow/workflow_index_page.rs b/crates/avored-web/src/interfaces/web/pages/admin/workflow/workflow_index_page.rs
index 9f8d3341..af655ee7 100644
--- a/crates/avored-web/src/interfaces/web/pages/admin/workflow/workflow_index_page.rs
+++ b/crates/avored-web/src/interfaces/web/pages/admin/workflow/workflow_index_page.rs
@@ -50,6 +50,18 @@ pub fn WorkflowIndexPage() -> impl IntoView {
                                     <th scope="col" class="px-5 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500 sm:px-6">"Actions"</th>
                                 </tr>
                             </thead>
+                            <tbody x-show="loading" class="divide-y divide-slate-100 bg-white">
+                                <template x-for="i in 3" x-bind:key="i">
+                                    <tr class="animate-pulse">
+                                        <td class="whitespace-nowrap px-5 py-4 sm:px-6"><div class="h-4 w-28 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-4 w-28 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-6 w-20 rounded-full bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-4 w-12 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4"><div class="h-4 w-24 rounded bg-slate-200"></div></td>
+                                        <td class="whitespace-nowrap px-5 py-4 text-right sm:px-6"><div class="ml-auto h-9 w-20 rounded-lg bg-slate-200"></div></td>
+                                    </tr>
+                                </template>
+                            </tbody>
                             <tbody x-show="!loading && workflows.length > 0" class="divide-y divide-slate-100 bg-white">
                                 <template x-for="workflow in workflows" x-bind:key="workflow.id">
                                     <tr class="transition hover:bg-slate-50">
@@ -79,18 +91,22 @@ pub fn WorkflowIndexPage() -> impl IntoView {
                                             <div class="flex items-center justify-end gap-2">
                                                 <a
                                                     x-bind:href="`/admin/workflows/${workflow.id}/edit`"
-                                                    class="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
+                                                    aria-label="Edit workflow"
+                                                    title="Edit workflow"
+                                                    class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white p-2 text-slate-700 transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
                                                 >
                                                     <i data-feather="edit-3" class="h-4 w-4"></i>
-                                                    "Edit"
+                                                    <span class="sr-only">"Edit"</span>
                                                 </a>
                                                 <button
                                                     type="button"
                                                     x-on:click="confirmDelete(workflow)"
-                                                    class="inline-flex items-center justify-center gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-medium text-red-700 transition hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+                                                    aria-label="Delete workflow"
+                                                    title="Delete workflow"
+                                                    class="inline-flex items-center justify-center rounded-lg border border-red-200 bg-red-50 p-2 text-red-700 transition hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                                                 >
                                                     <i data-feather="trash-2" class="h-4 w-4"></i>
-                                                    "Delete"
+                                                    <span class="sr-only">"Delete"</span>
                                                 </button>
                                             </div>
                                         </td>
@@ -120,22 +136,22 @@ pub fn WorkflowIndexPage() -> impl IntoView {
                                 type="button"
                                 x-on:click="previousPage()"
                                 x-bind:disabled="page <= 1 || loading"
-                                class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-slate-50 px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400"
                             >
                                 <i data-feather="chevron-left" class="h-4 w-4"></i>
                                 "Previous"
                             </button>
-                            <span class="px-2 text-sm text-slate-500">
+                            <span class="px-2 text-sm text-slate-600">
                                 "Page "
-                                <span class="font-medium text-slate-700" x-text="page"></span>
+                                <span class="font-semibold text-slate-800" x-text="page"></span>
                                 " of "
-                                <span class="font-medium text-slate-700" x-text="totalPages()"></span>
+                                <span class="font-semibold text-slate-800" x-text="totalPages()"></span>
                             </span>
                             <button
                                 type="button"
                                 x-on:click="nextPage()"
                                 x-bind:disabled="page >= totalPages() || loading"
-                                class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-slate-50 px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400"
                             >
                                 "Next"
                                 <i data-feather="chevron-right" class="h-4 w-4"></i>