fix: adding loading spinners

jaaydenh · jaaydenh · commit 4dabb5f502cd · 2025-01-16T19:56:01.000Z
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -32,6 +32,7 @@ import {
 	MultiSelectCombobox,
 	type Option,
 } from "components/MultiSelectCombobox/MultiSelectCombobox";
+import { Spinner } from "components/Spinner/Spinner";
 import { Switch } from "components/Switch/Switch";
 import { useFormik } from "formik";
 import { Plus, SquareArrowOutUpRight, Trash } from "lucide-react";
@@ -132,6 +133,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 											form.handleSubmit();
 										}}
 									>
+										<Spinner loading={form.isSubmitting} />
 										Save
 									</Button>
 								</div>
@@ -221,7 +223,9 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 										setCoderOrgs([]);
 									}}
 								>
-									<Plus size={14} />
+									<Spinner loading={form.isSubmitting}>
+										<Plus size={14} />
+									</Spinner>
 									Add IdP organization
 								</Button>
 							</div>
@@ -267,6 +271,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 							}}
 							type="submit"
 						>
+							<Spinner loading={form.isSubmitting} />
 							Confirm
 						</Button>
 					</DialogFooter>
@@ -344,7 +349,7 @@ const OrganizationRow: FC<OrganizationRowProps> = ({
 			<TableCell>
 				<Button
 					variant="outline"
-					className="w-8 h-8 px-1.5 py-1.5 text-content-secondary"
+					className="w-8 h-8 min-w-10 text-content-primary"
 					aria-label="delete"
 					onClick={() => onDelete(idpOrg)}
 				>
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
@@ -45,7 +45,6 @@ export const CustomRolesPageView: FC<CustomRolesPageViewProps> = ({
 	canAssignOrgRole,
 	isCustomRolesEnabled,
 }) => {
-	const theme = useTheme();
 	return (
 		<Stack spacing={4}>
 			{!isCustomRolesEnabled && (
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx
@@ -20,6 +20,7 @@ import {
 	MultiSelectCombobox,
 	type Option,
 } from "components/MultiSelectCombobox/MultiSelectCombobox";
+import { Spinner } from "components/Spinner/Spinner";
 import { Switch } from "components/Switch/Switch";
 import { useFormik } from "formik";
 import { Plus, Trash } from "lucide-react";
@@ -144,6 +145,7 @@ export const IdpGroupSyncForm = ({
 										form.handleSubmit();
 									}}
 								>
+									<Spinner loading={form.isSubmitting} />
 									Save
 								</Button>
 							</div>
@@ -154,14 +156,16 @@ export const IdpGroupSyncForm = ({
 					</div>
 				</div>
 				<div className="flex flex-row items-center gap-3">
-					<Switch
-						id={AUTO_CREATE_MISSING_GROUPS_ID}
-						checked={form.values.auto_create_missing_groups}
-						onCheckedChange={async (checked) => {
-							void form.setFieldValue("auto_create_missing_groups", checked);
-							form.handleSubmit();
-						}}
-					/>
+					<Spinner size="sm" loading={form.isSubmitting} className="w-9">
+						<Switch
+							id={AUTO_CREATE_MISSING_GROUPS_ID}
+							checked={form.values.auto_create_missing_groups}
+							onCheckedChange={async (checked) => {
+								void form.setFieldValue("auto_create_missing_groups", checked);
+								form.handleSubmit();
+							}}
+						/>
+					</Spinner>
 					<span className="flex flex-row items-center gap-1">
 						<Label htmlFor={AUTO_CREATE_MISSING_GROUPS_ID}>
 							Auto create missing groups
@@ -224,7 +228,9 @@ export const IdpGroupSyncForm = ({
 								setCoderGroups([]);
 							}}
 						>
-							<Plus size={14} />
+							<Spinner loading={form.isSubmitting}>
+								<Plus size={14} />
+							</Spinner>
 							Add IdP group
 						</Button>
 					</div>
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx
@@ -8,6 +8,7 @@ import {
 	MultiSelectCombobox,
 	type Option,
 } from "components/MultiSelectCombobox/MultiSelectCombobox";
+import { Spinner } from "components/Spinner/Spinner";
 import { useFormik } from "formik";
 import { Plus, Trash } from "lucide-react";
 import { type FC, useState } from "react";
@@ -105,6 +106,7 @@ export const IdpRoleSyncForm = ({
 									form.handleSubmit();
 								}}
 							>
+								<Spinner loading={form.isSubmitting} />
 								Save
 							</Button>
 						</div>
@@ -168,7 +170,9 @@ export const IdpRoleSyncForm = ({
 								setCoderRoles([]);
 							}}
 						>
-							<Plus size={14} />
+							<Spinner loading={form.isSubmitting}>
+								<Plus size={14} />
+							</Spinner>
 							Add IdP role
 						</Button>
 					</div>
