add skeletin

src/components/booking/BookingSlotPicker.vue

@@ -37,7 +37,9 @@
       </div>
     </div>
 
-    <div v-if="loadingSlots" class="text-sm text-muted">در حال بارگذاری ساعات…</div>
+        <div v-if="loadingSlots" class="py-1">
+          <SlotGridSkeleton />
+        </div>
     <p v-else-if="slotsError" class="text-sm text-red-600">{{ slotsError }}</p>
     <p
       v-else-if="!slots.length"
@@ -75,6 +77,7 @@
 import { computed, onMounted, ref, watch } from 'vue';
 import { fetchAvailableSlots } from '@/api/bookings';
 import { ApiError } from '@/api/client';
+import SlotGridSkeleton from '@/components/ui/SlotGridSkeleton.vue';
 import {
   clampJalaliDay,
   daysInJalaliMonth,

src/components/owner/BusinessAvailabilityEditor.vue

@@ -37,7 +37,7 @@
         {{ message }}
       </p>
 
-      <div v-if="loading" class="py-6 text-center text-sm text-muted">در حال بارگذاری…</div>
+      <ListCardSkeleton v-if="loading" :count="2" list-class="space-y-2 py-2" />
 
       <template v-else>
         <div class="flex rounded-xl bg-surface-3 p-1">
@@ -162,6 +162,7 @@ import {
   type AvailabilitySlot,
 } from '@/api/availability';
 import { ApiError } from '@/api/client';
+import ListCardSkeleton from '@/components/ui/ListCardSkeleton.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import AppIcon from '@/components/ui/AppIcon.vue';
 import TimeRangeList from '@/components/owner/TimeRangeList.vue';

src/components/owner/ServiceClassManager.vue

@@ -45,7 +45,7 @@
           {{ error }}
         </p>
 
-        <div v-if="loading" class="text-sm text-muted">در حال بارگذاری…</div>
+        <ListCardSkeleton v-if="loading" :count="2" />
 
         <ul v-else-if="classes.length" class="space-y-2">
           <li
@@ -125,6 +125,7 @@ import {
 } from '@/api/business-service-classes';
 import { ApiError } from '@/api/client';
 import type { BusinessServiceClass } from '@/api/types';
+import ListCardSkeleton from '@/components/ui/ListCardSkeleton.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import AppIcon from '@/components/ui/AppIcon.vue';
 import AppIconButton from '@/components/ui/AppIconButton.vue';
@@ -153,7 +154,7 @@ const editForm = ref({ title: '', description: '', isActive: true });
 
 const collapsedSummary = computed(() => {
   if (!props.enabled) return 'غیرفعال — هر خدمت یک قیمت ثابت';
-  if (loading.value) return 'فعال — در حال بارگذاری…';
+  if (loading.value) return '…';
   const count = classes.value.length;
   if (count === 0) return 'فعال — هنوز کلاسی تعریف نشده';
   const activeCount = classes.value.filter((c) => c.isActive).length;

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>

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>

src/components/ui/DetailPageSkeleton.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="space-y-6" aria-hidden="true">
+    <AppSkeleton class="aspect-[16/10] w-full rounded-2xl" />
+    <AppSkeleton class="h-5 w-20 rounded-lg" />
+    <AppSkeleton class="h-8 w-3/5 max-w-xs" />
+    <AppSkeleton class="h-4 w-full max-w-md" />
+    <div class="space-y-3 rounded-2xl border border-border bg-surface-2 p-4">
+      <div class="flex items-center justify-between gap-4">
+        <AppSkeleton class="h-4 w-12" />
+        <AppSkeleton class="h-4 w-28" />
+      </div>
+      <div class="flex items-start justify-between gap-4">
+        <AppSkeleton class="h-4 w-10" />
+        <AppSkeleton class="h-4 w-40 max-w-[75%]" />
+      </div>
+    </div>
+    <div>
+      <AppSkeleton class="mb-3 h-5 w-16" />
+      <ServiceGridSkeleton :count="4" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppSkeleton from '@/components/ui/AppSkeleton.vue';
+import ServiceGridSkeleton from '@/components/ui/ServiceGridSkeleton.vue';
+</script>

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>

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>

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>

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>

src/components/ui/SlotGridSkeleton.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="flex flex-wrap gap-2" aria-hidden="true">
+    <AppSkeleton
+      v-for="i in count"
+      :key="i"
+      class="h-10 w-[4.5rem] rounded-xl"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppSkeleton from '@/components/ui/AppSkeleton.vue';
+
+withDefaults(defineProps<{ count?: number }>(), { count: 8 });
+</script>

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>