feat(select): add loading spinner

src/components/ui/Select.tsx

@@ -1,28 +1,50 @@
 import { cn } from '@/lib/utils';
-import { SelectHTMLAttributes } from 'react';
+import { Loader2, ChevronDown } from 'lucide-react';
+import { SelectHTMLAttributes, forwardRef } from 'react';
 
 interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   options: { value: string; label: string; disabled?: boolean }[];
+  loading?: boolean;
 }
 
-export const Select = ({ className, options, ...restProps }: SelectProps) => {
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, options, loading = false, disabled, ...restProps }, ref) => {
     return (
+      <div
+        className={cn(
+          'relative inline-flex w-full items-center',
+          disabled && 'opacity-60',
+        )}
+      >
         <select
           {...restProps}
+          ref={ref}
+          disabled={disabled || loading}
           className={cn(
-        'bg-light-secondary dark:bg-dark-secondary px-3 py-2 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 dark:text-white rounded-lg text-sm',
+            'bg-light-secondary dark:bg-dark-secondary px-3 py-2 flex items-center overflow-hidden border border-light-200 dark:border-dark-200 dark:text-white rounded-lg text-sm appearance-none w-full pr-10',
             className,
           )}
         >
-      {options.map(({ label, value, disabled }) => {
+          {options.map(({ label, value, disabled: optionDisabled }) => {
             return (
-          <option key={value} value={value} disabled={disabled}>
+              <option key={value} value={value} disabled={optionDisabled}>
                 {label}
               </option>
             );
           })}
         </select>
+        <span className="pointer-events-none absolute right-3 flex h-4 w-4 items-center justify-center text-black/50 dark:text-white/60">
+          {loading ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <ChevronDown className="h-4 w-4" />
+          )}
+        </span>
+      </div>
     );
-};
+  },
+);
+
+Select.displayName = 'Select';
 
 export default Select;