From e697b81b3f04e31ba5f3919bcb01bddb3083b916 Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <rcrabbe@berkeley.edu>
Date: Sat, 7 Mar 2026 10:07:40 -0800
Subject: [PATCH] fix(ui): make Add Member button primary with icon and loading
 state

---
 .../common_components/user_search_modal.tsx   | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx b/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx
index 403070c6fb..0edf3d8b3f 100644
--- a/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx
@@ -1,5 +1,6 @@
 import { useState, useCallback } from "react";
 import { Modal, Form, Button, Select, Tooltip } from "antd";
+import { UserAddOutlined } from "@ant-design/icons";
 import debounce from "lodash/debounce";
 import { userFilterUICall } from "@/components/networking";
 interface User {
@@ -29,7 +30,7 @@ interface FormValues {
 interface UserSearchModalProps {
   isVisible: boolean;
   onCancel: () => void;
-  onSubmit: (values: FormValues) => void;
+  onSubmit: (values: FormValues) => void | Promise<void>;
   accessToken: string | null;
   title?: string;
   roles?: Role[];
@@ -56,6 +57,7 @@ const UserSearchModal: React.FC<UserSearchModalProps> = ({
   const [userOptions, setUserOptions] = useState<UserOption[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [selectedField, setSelectedField] = useState<"user_email" | "user_id">("user_email");
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const fetchUsers = async (searchText: string, fieldName: "user_email" | "user_id"): Promise<void> => {
     if (!searchText) {
@@ -105,6 +107,15 @@ const UserSearchModal: React.FC<UserSearchModalProps> = ({
     });
   };
 
+  const handleSubmit = async (values: FormValues): Promise<void> => {
+    setIsSubmitting(true);
+    try {
+      await onSubmit(values);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   const handleClose = (): void => {
     form.resetFields();
     setUserOptions([]);
@@ -112,10 +123,10 @@ const UserSearchModal: React.FC<UserSearchModalProps> = ({
   };
 
   return (
-    <Modal title={title} open={isVisible} onCancel={handleClose} footer={null} width={800}>
+    <Modal title={title} open={isVisible} onCancel={handleClose} footer={null} width={800} maskClosable={!isSubmitting}>
       <Form<FormValues>
         form={form}
-        onFinish={onSubmit}
+        onFinish={handleSubmit}
         labelCol={{ span: 8 }}
         wrapperCol={{ span: 16 }}
         labelAlign="left"
@@ -167,8 +178,8 @@ const UserSearchModal: React.FC<UserSearchModalProps> = ({
         </Form.Item>
 
         <div className="text-right mt-4">
-          <Button type="default" htmlType="submit">
-            Add Member
+          <Button type="primary" htmlType="submit" icon={<UserAddOutlined />} loading={isSubmitting}>
+            {isSubmitting ? "Adding..." : "Add Member"}
           </Button>
         </div>
       </Form>