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>(
-  return (
+  ({ className, options, loading = false, disabled, ...restProps }, ref) => {
-    <select
+    return (
-      {...restProps}
+      <div
-      className={cn(
+        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',
+          'relative inline-flex w-full items-center',
-        className,
+          disabled && 'opacity-60',
-      )}
+        )}
-    >
+      >
-      {options.map(({ label, value, disabled }) => {
+        <select
-        return (
+          {...restProps}
-          <option key={value} value={value} disabled={disabled}>
+          ref={ref}
-            {label}
+          disabled={disabled || loading}
-          </option>
+          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 appearance-none w-full pr-10',
-      })}
+            className,
-    </select>
+          )}
-  );
+        >
-};
+          {options.map(({ label, value, disabled: optionDisabled }) => {
+            return (
+              <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;