Adding loading states to edit settings

ui/litellm-dashboard/src/components/model_info_view.tsx

@@ -966,6 +966,7 @@ export default function ModelInfoView({
                             setIsDirty(false);
                             setIsEditing(false);
                           }}
+                          disabled={isSaving}
                         >
                           Cancel
                         </TremorButton>

ui/litellm-dashboard/src/components/organization/organization_view.tsx

@@ -69,6 +69,7 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
   const [isEditMemberModalVisible, setIsEditMemberModalVisible] = useState(false);
   const [selectedEditMember, setSelectedEditMember] = useState<Member | null>(null);
   const [copiedStates, setCopiedStates] = useState<Record<string, boolean>>({});
+  const [isOrgSaving, setIsOrgSaving] = useState(false);
   const canEditOrg = is_org_admin || is_proxy_admin;
 
   const fetchOrgInfo = async () => {
@@ -151,6 +152,7 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
   const handleOrgUpdate = async (values: any) => {
     try {
       if (!accessToken) return;
+      setIsOrgSaving(true);
 
       const updateData: any = {
         organization_id: organizationId,
@@ -194,6 +196,8 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
     } catch (error) {
       NotificationsManager.fromBackend("Failed to update organization settings");
       console.error("Error updating organization:", error);
+    } finally {
+      setIsOrgSaving(false);
     }
   };
 
@@ -492,10 +496,12 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
 
                   <div className="sticky z-10 bg-white p-4 border-t border-gray-200 bottom-[-1.5rem] inset-x-[-1.5rem]">
                     <div className="flex justify-end items-center gap-2">
-                      <TremorButton variant="secondary" onClick={() => setIsEditing(false)}>
+                      <TremorButton variant="secondary" onClick={() => setIsEditing(false)} disabled={isOrgSaving}>
                         Cancel
                       </TremorButton>
-                      <TremorButton type="submit">Save Changes</TremorButton>
+                      <TremorButton type="submit" loading={isOrgSaving}>
+                        Save Changes
+                      </TremorButton>
                     </div>
                   </div>
                 </Form>

ui/litellm-dashboard/src/components/team/team_info.tsx

@@ -142,6 +142,7 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
   const [memberToDelete, setMemberToDelete] = useState<Member | null>(null);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [isTeamSaving, setIsTeamSaving] = useState(false);
 
   console.log("userModels in team info", userModels);
 
@@ -310,6 +311,7 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
   const handleTeamUpdate = async (values: any) => {
     try {
       if (!accessToken) return;
+      setIsTeamSaving(true);
 
       let parsedMetadata = {};
       try {
@@ -387,6 +389,8 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
       fetchTeamInfo();
     } catch (error) {
       console.error("Error updating team:", error);
+    } finally {
+      setIsTeamSaving(false);
     }
   };
 
@@ -770,10 +774,12 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
 
                   <div className="sticky z-10 bg-white p-4 border-t border-gray-200 bottom-[-1.5rem] inset-x-[-1.5rem]">
                     <div className="flex justify-end items-center gap-2">
-                      <TremorButton variant="secondary" onClick={() => setIsEditing(false)}>
+                      <TremorButton variant="secondary" onClick={() => setIsEditing(false)} disabled={isTeamSaving}>
                         Cancel
                       </TremorButton>
-                      <TremorButton type="submit">Save Changes</TremorButton>
+                      <TremorButton type="submit" loading={isTeamSaving}>
+                        Save Changes
+                      </TremorButton>
                     </div>
                   </div>
                 </Form>

ui/litellm-dashboard/src/components/templates/key_edit_view.tsx

@@ -95,6 +95,7 @@ export function KeyEditView({
   );
   const [autoRotationEnabled, setAutoRotationEnabled] = useState<boolean>(keyData.auto_rotate || false);
   const [rotationInterval, setRotationInterval] = useState<string>(keyData.rotation_interval || "");
+  const [isKeySaving, setIsKeySaving] = useState(false);
 
   const fetchMcpAccessGroups = async () => {
     if (!accessToken) return;
@@ -236,8 +237,17 @@ export function KeyEditView({
 
   console.log("premiumUser:", premiumUser);
 
+  const handleSubmit = async (values: any) => {
+    try {
+      setIsKeySaving(true);
+      await onSubmit(values);
+    } finally {
+      setIsKeySaving(false);
+    }
+  };
+
   return (
-    <Form form={form} onFinish={onSubmit} initialValues={initialValues} layout="vertical">
+    <Form form={form} onFinish={handleSubmit} initialValues={initialValues} layout="vertical">
       <Form.Item label="Key Alias" name="key_alias">
         <TextInput />
       </Form.Item>
@@ -403,11 +413,7 @@ export function KeyEditView({
         name="disable_global_guardrails"
         valuePropName="checked"
       >
-        <Switch 
-          disabled={!premiumUser}
-          checkedChildren="Yes"
-          unCheckedChildren="No"
-        />
+        <Switch disabled={!premiumUser} checkedChildren="Yes" unCheckedChildren="No" />
       </Form.Item>
 
       <Form.Item label="Tags" name="tags">
@@ -573,10 +579,12 @@ export function KeyEditView({
 
       <div className="sticky z-10 bg-white p-4 border-t border-gray-200 bottom-[-1.5rem] inset-x-[-1.5rem]">
         <div className="flex justify-end items-center gap-2">
-          <TremorButton variant="secondary" onClick={onCancel}>
+          <TremorButton variant="secondary" onClick={onCancel} disabled={isKeySaving}>
             Cancel
           </TremorButton>
-          <TremorButton type="submit">Save Changes</TremorButton>
+          <TremorButton type="submit" loading={isKeySaving}>
+            Save Changes
+          </TremorButton>
         </div>
       </div>
     </Form>