Add loading state for select dropdown

apps/console/src/components/form/PeopleSelectField.tsx

@@ -20,7 +20,7 @@ export function PeopleSelectField({
   return (
     <Field {...props}>
       <Suspense
-        fallback={<Select variant="editor" disabled placeholder="Loading..." />}
+        fallback={<Select variant="editor" loading placeholder="Loading..." />}
       >
         <PeopleSelectWithQuery
           organizationId={organizationId}

packages/ui/src/Atoms/Select/Select.stories.tsx

@@ -37,3 +37,17 @@ export const Invalid: Story = {
         invalid: true,
     },
 };
+
+export const Loading: Story = {
+    args: {
+        ...Default.args,
+        loading: true,
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        disabled: true,
+    },
+};

packages/ui/src/Atoms/Select/Select.tsx

@@ -15,6 +15,7 @@ import { IconChevronGrabberVertical } from "../Icons/IconChevronGrabberVertical.
 import { tv } from "tailwind-variants";
 import { Children, type ComponentProps, type PropsWithChildren } from "react";
 import { IconMagnifyingGlass } from "../Icons/IconMagnifyingGlass.tsx";
+import { Spinner } from "../Spinner/Spinner.tsx";
 
 type Props<T> = PropsWithChildren<
     {
@@ -29,6 +30,7 @@ type Props<T> = PropsWithChildren<
         searchValue?: string;
         onSearch?: (s: string) => void;
         searchPlaceholder?: string;
+        loading?: boolean;
     } & Omit<ComponentProps<typeof Root>, "onChange" | "value">
 >;
 
@@ -51,6 +53,11 @@ const select = tv({
                 trigger: "opacity-60",
             },
         },
+        loading: {
+            true: {
+                trigger: "opacity-60",
+            },
+        },
         variant: {
             dashed: {
                 trigger: input({
@@ -88,6 +95,7 @@ export function Select<T>({
     searchValue,
     onSearch,
     searchPlaceholder,
+    loading,
     ...props
 }: Props<T>) {
     const { trigger, content, icon } = select({
@@ -105,7 +113,11 @@ export function Select<T>({
             >
                 <Value placeholder={placeholder} />
                 <Icon className={icon()}>
-                    <IconChevronGrabberVertical size={16} />
+                    {loading ? (
+                        <Spinner size={16} />
+                    ) : (
+                        <IconChevronGrabberVertical size={16} />
+                    )}
                 </Icon>
             </Trigger>
             <Portal>