From b3dd977f048a3590ec883915f7f661013078681d Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Wed, 3 Jun 2026 16:35:53 +0330
Subject: [PATCH] add skeletin

---
 .../admin/BusinessServicesSection.vue         |  3 +-
 src/components/ui/AppSkeleton.vue             | 13 ++++++
 src/components/ui/BusinessCardSkeleton.vue    | 41 +++++++++++++++++++
 src/components/ui/FormPageSkeleton.vue        | 15 +++++++
 src/components/ui/InlineCardSkeleton.vue      | 12 ++++++
 src/components/ui/ListCardSkeleton.vue        | 37 +++++++++++++++++
 src/components/ui/ServiceGridSkeleton.vue     | 19 +++++++++
 src/components/ui/StatGridSkeleton.vue        | 15 +++++++
 src/views/BookingsView.vue                    |  3 +-
 src/views/BusinessRequestsView.vue            |  3 +-
 src/views/BusinessesView.vue                  | 11 ++---
 src/views/CategoriesView.vue                  |  3 +-
 src/views/DashboardView.vue                   |  7 +++-
 src/views/ServiceRequestsView.vue             |  3 +-
 src/views/ServiceTemplatesView.vue            |  3 +-
 src/views/UsersView.vue                       |  3 +-
 16 files changed, 176 insertions(+), 15 deletions(-)
 create mode 100644 src/components/ui/AppSkeleton.vue
 create mode 100644 src/components/ui/BusinessCardSkeleton.vue
 create mode 100644 src/components/ui/FormPageSkeleton.vue
 create mode 100644 src/components/ui/InlineCardSkeleton.vue
 create mode 100644 src/components/ui/ListCardSkeleton.vue
 create mode 100644 src/components/ui/ServiceGridSkeleton.vue
 create mode 100644 src/components/ui/StatGridSkeleton.vue

diff --git a/src/components/admin/BusinessServicesSection.vue b/src/components/admin/BusinessServicesSection.vue
index 43248da..dd368f7 100644
--- a/src/components/admin/BusinessServicesSection.vue
+++ b/src/components/admin/BusinessServicesSection.vue
@@ -9,7 +9,7 @@
 
     <p v-if="error" class="text-sm text-red-600">{{ error }}</p>
 
-    <div v-if="loading" class="text-sm text-muted">در حال بارگذاری خدمات…</div>
+    <ListCardSkeleton v-if="loading" :count="2" />
 
     <ul v-else-if="services.length" class="space-y-2">
       <li
@@ -69,6 +69,7 @@ import {
 import { fetchServiceTemplates } from '@/api/service-templates';
 import type { ServiceTemplate } from '@/api/types';
 import { ApiError } from '@/api/client';
+import ListCardSkeleton from '@/components/ui/ListCardSkeleton.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppSelect from '@/components/ui/AppSelect.vue';
diff --git a/src/components/ui/AppSkeleton.vue b/src/components/ui/AppSkeleton.vue
new file mode 100644
index 0000000..5aaca9a
--- /dev/null
+++ b/src/components/ui/AppSkeleton.vue
@@ -0,0 +1,13 @@
+<template>
+  <div
+    class="animate-pulse rounded-lg bg-surface-3"
+    :class="klass"
+    aria-hidden="true"
+  />
+</template>
+
+<script setup lang="ts">
+const { class: klass } = defineProps<{
+  class?: string;
+}>();
+</script>
diff --git a/src/components/ui/BusinessCardSkeleton.vue b/src/components/ui/BusinessCardSkeleton.vue
new file mode 100644
index 0000000..be637d2
--- /dev/null
+++ b/src/components/ui/BusinessCardSkeleton.vue
@@ -0,0 +1,41 @@
+<template>
+  <ul :class="listClass" aria-hidden="true">
+    <li
+      v-for="i in count"
+      :key="i"
+      class="flex items-center gap-3 rounded-xl border border-border bg-surface-2 p-2.5"
+    >
+      <div class="min-w-0 flex-1 space-y-2">
+        <div class="flex items-start justify-between gap-2">
+          <AppSkeleton class="h-4 w-32" />
+          <AppSkeleton class="h-4 w-14 shrink-0 rounded-lg" />
+        </div>
+        <AppSkeleton class="h-3 w-full max-w-[80%]" />
+        <AppSkeleton class="h-3 w-24" />
+      </div>
+      <AppSkeleton :class="imageClass" class="shrink-0 rounded-lg" />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import AppSkeleton from '@/components/ui/AppSkeleton.vue';
+
+const props = withDefaults(
+  defineProps<{
+    count?: number;
+    listClass?: string;
+    size?: 'md' | 'lg';
+  }>(),
+  {
+    count: 4,
+    listClass: 'space-y-2',
+    size: 'md',
+  },
+);
+
+const imageClass = computed(() =>
+  props.size === 'lg' ? 'h-20 w-20' : 'h-14 w-14 sm:h-16 sm:w-16',
+);
+</script>
diff --git a/src/components/ui/FormPageSkeleton.vue b/src/components/ui/FormPageSkeleton.vue
new file mode 100644
index 0000000..5af5b9a
--- /dev/null
+++ b/src/components/ui/FormPageSkeleton.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="space-y-4" aria-hidden="true">
+    <AppSkeleton class="h-6 w-40" />
+    <AppSkeleton class="h-24 w-full rounded-2xl" />
+    <AppSkeleton class="h-12 w-full rounded-xl" />
+    <AppSkeleton class="h-24 w-full rounded-xl" />
+    <AppSkeleton class="h-12 w-full rounded-xl" />
+    <AppSkeleton class="h-12 w-full rounded-xl" />
+    <AppSkeleton class="h-11 w-full rounded-xl" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppSkeleton from '@/components/ui/AppSkeleton.vue';
+</script>
diff --git a/src/components/ui/InlineCardSkeleton.vue b/src/components/ui/InlineCardSkeleton.vue
new file mode 100644
index 0000000..2f0a659
--- /dev/null
+++ b/src/components/ui/InlineCardSkeleton.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="space-y-3 rounded-xl border border-border bg-surface-3 p-3" aria-hidden="true">
+    <AppSkeleton class="h-4 w-24" />
+    <AppSkeleton class="h-5 w-40" />
+    <AppSkeleton class="h-4 w-32" />
+    <AppSkeleton class="h-6 w-16 rounded-lg" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppSkeleton from '@/components/ui/AppSkeleton.vue';
+</script>
diff --git a/src/components/ui/ListCardSkeleton.vue b/src/components/ui/ListCardSkeleton.vue
new file mode 100644
index 0000000..97f329c
--- /dev/null
+++ b/src/components/ui/ListCardSkeleton.vue
@@ -0,0 +1,37 @@
+<template>
+  <ul :class="listClass" aria-hidden="true">
+    <li
+      v-for="i in count"
+      :key="i"
+      class="rounded-2xl border border-border bg-surface-2 p-4"
+    >
+      <div class="flex items-center justify-between gap-4">
+        <AppSkeleton class="h-5 w-36 max-w-[45%]" />
+        <AppSkeleton class="h-4 w-24 shrink-0" />
+      </div>
+      <div class="mt-2 flex items-center justify-between gap-2">
+        <div class="flex flex-wrap gap-2">
+          <AppSkeleton class="h-6 w-14 rounded-lg" />
+          <AppSkeleton class="h-6 w-12 rounded-lg" />
+          <AppSkeleton class="h-6 w-16 rounded-lg" />
+        </div>
+        <AppSkeleton class="h-9 w-9 shrink-0 rounded-full" />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import AppSkeleton from '@/components/ui/AppSkeleton.vue';
+
+withDefaults(
+  defineProps<{
+    count?: number;
+    listClass?: string;
+  }>(),
+  {
+    count: 4,
+    listClass: 'space-y-2',
+  },
+);
+</script>
diff --git a/src/components/ui/ServiceGridSkeleton.vue b/src/components/ui/ServiceGridSkeleton.vue
new file mode 100644
index 0000000..4d8aa33
--- /dev/null
+++ b/src/components/ui/ServiceGridSkeleton.vue
@@ -0,0 +1,19 @@
+<template>
+  <ul class="grid grid-cols-2 gap-3" aria-hidden="true">
+    <li
+      v-for="i in count"
+      :key="i"
+      class="flex min-h-[7rem] flex-col rounded-xl border border-border bg-surface-2 p-3"
+    >
+      <AppSkeleton class="mx-auto h-4 w-3/4" />
+      <AppSkeleton class="mx-auto mt-2 h-3 w-1/2" />
+      <AppSkeleton class="mx-auto mt-auto h-3 w-16 pt-4" />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import AppSkeleton from '@/components/ui/AppSkeleton.vue';
+
+withDefaults(defineProps<{ count?: number }>(), { count: 4 });
+</script>
diff --git a/src/components/ui/StatGridSkeleton.vue b/src/components/ui/StatGridSkeleton.vue
new file mode 100644
index 0000000..0ca5c74
--- /dev/null
+++ b/src/components/ui/StatGridSkeleton.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="grid grid-cols-2 gap-3 lg:grid-cols-3" aria-hidden="true">
+    <AppSkeleton
+      v-for="i in count"
+      :key="i"
+      class="h-24 rounded-2xl"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppSkeleton from '@/components/ui/AppSkeleton.vue';
+
+withDefaults(defineProps<{ count?: number }>(), { count: 5 });
+</script>
diff --git a/src/views/BookingsView.vue b/src/views/BookingsView.vue
index f079e0b..5b58213 100644
--- a/src/views/BookingsView.vue
+++ b/src/views/BookingsView.vue
@@ -22,7 +22,7 @@
       {{ error }}
     </p>
 
-    <div v-if="loading" class="mt-4 text-sm text-muted">در حال بارگذاری…</div>
+    <ListCardSkeleton v-if="loading" list-class="mt-4 space-y-2" />
 
     <EmptyState v-else-if="filteredBookings.length === 0" class="mt-4">
       {{
@@ -66,6 +66,7 @@ import { deleteBooking, fetchBookings } from '@/api/bookings';
 import { fetchBusinesses } from '@/api/businesses';
 import type { Booking, BookingStatus, Business } from '@/api/types';
 import { ApiError } from '@/api/client';
+import ListCardSkeleton from '@/components/ui/ListCardSkeleton.vue';
 import AppBadge from '@/components/ui/AppBadge.vue';
 import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppSelect from '@/components/ui/AppSelect.vue';
diff --git a/src/views/BusinessRequestsView.vue b/src/views/BusinessRequestsView.vue
index 94f82f4..7fd6c2e 100644
--- a/src/views/BusinessRequestsView.vue
+++ b/src/views/BusinessRequestsView.vue
@@ -28,7 +28,7 @@
       {{ error }}
     </p>
 
-    <div v-if="loading" class="mt-4 text-sm text-muted">در حال بارگذاری…</div>
+    <ListCardSkeleton v-if="loading" list-class="mt-4 space-y-2" />
 
     <EmptyState v-else-if="requests.length === 0" class="mt-4">
       درخواستی یافت نشد.
@@ -95,6 +95,7 @@ import {
 import type { BusinessRegistrationRequest, BusinessRegistrationStatus } from '@/api/types';
 import { ApiError } from '@/api/client';
 import AppBadge from '@/components/ui/AppBadge.vue';
+import ListCardSkeleton from '@/components/ui/ListCardSkeleton.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import AppModal from '@/components/ui/AppModal.vue';
 import AppTextarea from '@/components/ui/AppTextarea.vue';
diff --git a/src/views/BusinessesView.vue b/src/views/BusinessesView.vue
index 197f6a5..3009f7f 100644
--- a/src/views/BusinessesView.vue
+++ b/src/views/BusinessesView.vue
@@ -30,7 +30,7 @@
       {{ error }}
     </p>
 
-    <div v-if="loading" class="mt-4 text-sm text-muted">در حال بارگذاری…</div>
+    <BusinessCardSkeleton v-if="loading" size="lg" list-class="mt-4 space-y-2" />
 
     <EmptyState v-else-if="filteredBusinesses.length === 0" class="mt-4">
       {{
@@ -116,12 +116,7 @@
       <form v-if="assignTarget" class="space-y-4" @submit.prevent="onAssign">
         <p class="text-sm font-medium text-text">{{ assignTarget.title }}</p>
 
-        <div
-          v-if="assignOwnerLoading"
-          class="rounded-xl border border-border bg-surface-3 px-4 py-3 text-sm text-muted"
-        >
-          در حال بارگذاری اطلاعات مدیر…
-        </div>
+        <InlineCardSkeleton v-if="assignOwnerLoading" />
 
         <div
           v-else-if="assignCurrentOwner"
@@ -203,6 +198,8 @@ import { ApiError } from '@/api/client';
 import BusinessImageUpload from '@/components/admin/BusinessImageUpload.vue';
 import BusinessServicesSection from '@/components/admin/BusinessServicesSection.vue';
 import BusinessListCard from '@/components/admin/BusinessListCard.vue';
+import BusinessCardSkeleton from '@/components/ui/BusinessCardSkeleton.vue';
+import InlineCardSkeleton from '@/components/ui/InlineCardSkeleton.vue';
 import AppBadge from '@/components/ui/AppBadge.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import AppIconButton from '@/components/ui/AppIconButton.vue';
diff --git a/src/views/CategoriesView.vue b/src/views/CategoriesView.vue
index 1c45481..7d1a6ca 100644
--- a/src/views/CategoriesView.vue
+++ b/src/views/CategoriesView.vue
@@ -24,7 +24,7 @@
       {{ error }}
     </p>
 
-    <div v-if="loading" class="mt-4 text-sm text-muted">در حال بارگذاری…</div>
+    <ListCardSkeleton v-if="loading" list-class="mt-4 space-y-2" />
 
     <EmptyState v-else-if="filteredCategories.length === 0" class="mt-4">
       {{
@@ -92,6 +92,7 @@ import {
 import type { BusinessCategory } from '@/api/types';
 import { ApiError } from '@/api/client';
 import AppBadge from '@/components/ui/AppBadge.vue';
+import ListCardSkeleton from '@/components/ui/ListCardSkeleton.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppInput from '@/components/ui/AppInput.vue';
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index 2650008..420a626 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -16,7 +16,10 @@
       {{ error }}
     </p>
 
-    <div v-if="loading" class="mt-6 text-sm text-muted">در حال بارگذاری…</div>
+    <div v-if="loading" class="mt-6 space-y-8">
+      <StatGridSkeleton />
+      <BusinessCardSkeleton size="lg" :count="3" />
+    </div>
 
     <template v-else>
       <div class="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-3">
@@ -69,6 +72,8 @@ import { fetchBusinesses } from '@/api/businesses';
 import { fetchUsers } from '@/api/users';
 import type { Business } from '@/api/types';
 import { ApiError } from '@/api/client';
+import BusinessCardSkeleton from '@/components/ui/BusinessCardSkeleton.vue';
+import StatGridSkeleton from '@/components/ui/StatGridSkeleton.vue';
 import BusinessListCard from '@/components/admin/BusinessListCard.vue';
 import StatCard from '@/components/admin/StatCard.vue';
 import EmptyState from '@/components/ui/EmptyState.vue';
diff --git a/src/views/ServiceRequestsView.vue b/src/views/ServiceRequestsView.vue
index 032360d..d729f9f 100644
--- a/src/views/ServiceRequestsView.vue
+++ b/src/views/ServiceRequestsView.vue
@@ -28,7 +28,7 @@
       {{ error }}
     </p>
 
-    <div v-if="loading" class="mt-4 text-sm text-muted">در حال بارگذاری…</div>
+    <ListCardSkeleton v-if="loading" list-class="mt-4 space-y-2" />
 
     <EmptyState v-else-if="requests.length === 0" class="mt-4">
       درخواستی یافت نشد.
@@ -100,6 +100,7 @@ import {
 import type { BusinessServiceRequest, BusinessServiceRequestStatus } from '@/api/types';
 import { ApiError } from '@/api/client';
 import AppBadge from '@/components/ui/AppBadge.vue';
+import ListCardSkeleton from '@/components/ui/ListCardSkeleton.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import AppModal from '@/components/ui/AppModal.vue';
 import AppTextarea from '@/components/ui/AppTextarea.vue';
diff --git a/src/views/ServiceTemplatesView.vue b/src/views/ServiceTemplatesView.vue
index 6666855..4331612 100644
--- a/src/views/ServiceTemplatesView.vue
+++ b/src/views/ServiceTemplatesView.vue
@@ -30,7 +30,7 @@
       {{ error }}
     </p>
 
-    <div v-if="loading" class="mt-4 text-sm text-muted">در حال بارگذاری…</div>
+    <ListCardSkeleton v-if="loading" list-class="mt-4 space-y-2" />
 
     <EmptyState v-else-if="!selectedCategoryId" class="mt-4">
       ابتدا یک دسته انتخاب کنید.
@@ -104,6 +104,7 @@ import {
 import type { BusinessCategory, ServiceTemplate } from '@/api/types';
 import { ApiError } from '@/api/client';
 import AppBadge from '@/components/ui/AppBadge.vue';
+import ListCardSkeleton from '@/components/ui/ListCardSkeleton.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppInput from '@/components/ui/AppInput.vue';
diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue
index 6618b4c..041fd11 100644
--- a/src/views/UsersView.vue
+++ b/src/views/UsersView.vue
@@ -12,7 +12,7 @@
       {{ error }}
     </p>
 
-    <div v-if="loading" class="mt-4 text-sm text-muted">در حال بارگذاری…</div>
+    <ListCardSkeleton v-if="loading" list-class="mt-4 space-y-2" />
 
     <EmptyState v-else-if="filteredUsers.length === 0" class="mt-4">
       {{
@@ -104,6 +104,7 @@ import { fetchUsers, setUserPassword, updateUser } from '@/api/users';
 import type { User, UserRole } from '@/api/types';
 import { ApiError } from '@/api/client';
 import AppBadge from '@/components/ui/AppBadge.vue';
+import ListCardSkeleton from '@/components/ui/ListCardSkeleton.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppInput from '@/components/ui/AppInput.vue';