From f709eda08c202247b4a49b92c2829e553216bbab Mon Sep 17 00:00:00 2001
From: Jonathan <contact@grafikart.fr>
Date: Fri, 13 Jun 2025 23:39:25 +0200
Subject: [PATCH] Add loading state for select dropdown

---
 .../src/components/form/PeopleSelectField.tsx      |  2 +-
 packages/ui/src/Atoms/Select/Select.stories.tsx    | 14 ++++++++++++++
 packages/ui/src/Atoms/Select/Select.tsx            | 14 +++++++++++++-
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/console/src/components/form/PeopleSelectField.tsx b/apps/console/src/components/form/PeopleSelectField.tsx
index c98cf8ea9..ef607181b 100644
--- a/apps/console/src/components/form/PeopleSelectField.tsx
+++ b/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}
diff --git a/packages/ui/src/Atoms/Select/Select.stories.tsx b/packages/ui/src/Atoms/Select/Select.stories.tsx
index f64bca2de..7d89df492 100644
--- a/packages/ui/src/Atoms/Select/Select.stories.tsx
+++ b/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,
+    },
+};
diff --git a/packages/ui/src/Atoms/Select/Select.tsx b/packages/ui/src/Atoms/Select/Select.tsx
index 071b49273..7d3181804 100644
--- a/packages/ui/src/Atoms/Select/Select.tsx
+++ b/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>