announcement

src/components/MultiSelectSearchable.tsx

@@ -121,7 +121,7 @@ const MultiSelectSearchable: React.FC<MultiSelectSearchableProps> = ({
                     </Button>
                 </PopoverTrigger>
                 <PopoverContent
-                    className="w-[var(--radix-popover-trigger-width)] max-w-[400px] p-0"
+                    className="w-[var(--radix-popover-trigger-width)] max-w-[400px] p-0 z-[70]"
                     align="start"
                     onKeyDown={(e) => {
                         // Prevent event bubbling that might cause navigation
@@ -154,7 +154,13 @@ const MultiSelectSearchable: React.FC<MultiSelectSearchableProps> = ({
                                 }}
                             />
                         </div>
-                        <CommandList>
+                        <CommandList className="max-h-[200px]">
+                            {loading && options.length === 0 && (
+                                <div className="flex items-center justify-center py-6">
+                                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-900"></div>
+                                    <span className="ml-2 text-sm text-muted-foreground">در حال بارگذاری...</span>
+                                </div>
+                            )}
                             <CommandEmpty>موردی یافت نشد.</CommandEmpty>
                             <CommandGroup>
                                 {options.map((option) => {