added loading for select

frontend/components/global/Select.vue

@@ -9,6 +9,7 @@ type Props = {
     options?: string[];
     placeholder?: string;
     triggerRootClass?: string;
+    loading?: boolean;
 };
 
 type Emits = {
@@ -21,6 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
     variant: "solid",
     disabled: false,
     placeholder: "وارد نشده",
+    loading: false,
 });
 
 const { modelValue, variant, error, triggerRootClass } = toRefs(props);
@@ -53,15 +55,25 @@ const classes = computed(() => {
 </script>
 
 <template>
-    <SelectRoot v-model="selectedValue" dir="rtl">
+    <SelectRoot
+        v-model="selectedValue"
+        dir="rtl"
+        :disabled="disabled || loading"
+    >
         <SelectTrigger :class="classes">
+            <slot v-if="!!$slots.trigger" name="trigger" />
+
             <SelectValue
+                v-else
                 :placeholder="placeholder"
                 v-bind="$attrs"
-                :class="selectedValue ? 'text-black' : 'text-slate-400'"
+                :class="selectedValue ? '!text-black' : 'text-slate-400'"
                 class="font-iran-yekan-x text-sm text-start placeholder-slate-400"
             />
-            <Icon name="bi:chevron-down" size="16" />
+            <Icon
+                :name="loading ? 'svg-spinners:3-dots-fade' : 'bi:chevron-down'"
+                size="16"
+            />
         </SelectTrigger>
 
         <SelectPortal>