chore: replace MUI LoadingButton with Button + Spinner - 1 (#17816)

site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx

@@ -1,17 +1,18 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import AddIcon from "@mui/icons-material/AddOutlined";
-import LoadingButton from "@mui/lab/LoadingButton";
-import Button from "@mui/material/Button";
+import MuiButton from "@mui/material/Button";
 import MuiLink from "@mui/material/Link";
 import Skeleton from "@mui/material/Skeleton";
 import Tooltip from "@mui/material/Tooltip";
 import type { GetLicensesResponse } from "api/api";
 import type { UserStatusChangeCount } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import {
 	SettingsHeader,
 	SettingsHeaderDescription,
 	SettingsHeaderTitle,
 } from "components/SettingsHeader/SettingsHeader";
+import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { useWindowSize } from "hooks/useWindowSize";
 import { RotateCwIcon } from "lucide-react";
@@ -72,22 +73,24 @@ const LicensesSettingsPageView: FC<Props> = ({
 				</SettingsHeader>
 
 				<Stack direction="row" spacing={2}>
-					<Button
+					<MuiButton
 						component={Link}
 						to="/deployment/licenses/add"
 						startIcon={<AddIcon />}
 					>
 						Add a license
-					</Button>
+					</MuiButton>
 					<Tooltip title="Refresh license entitlements. This is done automatically every 10 minutes.">
-						<LoadingButton
-							loadingPosition="start"
-							loading={isRefreshing}
+						<Button
+							disabled={isRefreshing}
 							onClick={refreshEntitlements}
-							startIcon={<RotateCwIcon className="size-icon-xs" />}
+							variant="outline"
 						>
+							<Spinner loading={isRefreshing}>
+								<RotateCwIcon className="size-icon-xs" />
+							</Spinner>
 							Refresh
-						</LoadingButton>
+						</Button>
 					</Tooltip>
 				</Stack>
 			</Stack>

site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx

@@ -1,7 +1,8 @@
 import { useTheme } from "@emotion/react";
-import LoadingButton from "@mui/lab/LoadingButton";
 import { API } from "api/api";
+import { Button } from "components/Button/Button";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
+import { Spinner } from "components/Spinner/Spinner";
 import type { FC } from "react";
 import { useMutation } from "react-query";
 
@@ -29,17 +30,17 @@ export const Troubleshooting: FC = () => {
 			</div>
 			<div>
 				<span>
-					<LoadingButton
-						variant="outlined"
-						loading={isLoading}
-						size="small"
-						css={{ minWidth: "auto", aspectRatio: "1" }}
+					<Button
+						variant="outline"
+						size="sm"
+						disabled={isLoading}
 						onClick={() => {
 							sendTestNotificationApi();
 						}}
 					>
+						<Spinner loading={isLoading} />
 						Send notification
-					</LoadingButton>
+					</Button>
 				</span>
 			</div>
 		</>

site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx

@@ -1,6 +1,5 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import CopyIcon from "@mui/icons-material/FileCopyOutlined";
-import LoadingButton from "@mui/lab/LoadingButton";
 import Divider from "@mui/material/Divider";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -22,6 +21,7 @@ import {
 	SettingsHeaderDescription,
 	SettingsHeaderTitle,
 } from "components/SettingsHeader/SettingsHeader";
+import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import { ChevronLeftIcon } from "lucide-react";
@@ -224,14 +224,14 @@ const OAuth2AppSecretsTable: FC<OAuth2AppSecretsTableProps> = ({
 				justifyContent="space-between"
 			>
 				<h2>Client secrets</h2>
-				<LoadingButton
-					loading={mutatingResource.createSecret}
+				<Button
+					disabled={mutatingResource.createSecret}
 					type="submit"
-					variant="contained"
 					onClick={generateAppSecret}
 				>
+					<Spinner loading={mutatingResource.createSecret} />
 					Generate secret
-				</LoadingButton>
+				</Button>
 			</Stack>
 
 			<TableContainer>

site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppForm.tsx

@@ -1,7 +1,8 @@
-import LoadingButton from "@mui/lab/LoadingButton";
 import TextField from "@mui/material/TextField";
 import { isApiValidationError, mapApiErrorToFieldErrors } from "api/errors";
 import type * as TypesGen from "api/typesGenerated";
+import { Button } from "components/Button/Button";
+import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import type { FC, ReactNode } from "react";
 
@@ -76,9 +77,10 @@ export const OAuth2AppForm: FC<OAuth2AppFormProps> = ({
 				/>
 
 				<Stack direction="row">
-					<LoadingButton loading={isUpdating} type="submit" variant="contained">
+					<Button disabled={isUpdating} type="submit">
+						<Spinner loading={isUpdating} />
 						{app ? "Update application" : "Create application"}
-					</LoadingButton>
+					</Button>
 					{actions}
 				</Stack>
 			</Stack>

site/src/pages/GroupsPage/GroupPage.tsx

@@ -1,7 +1,6 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import PersonAdd from "@mui/icons-material/PersonAdd";
-import LoadingButton from "@mui/lab/LoadingButton";
-import Button from "@mui/material/Button";
+import MuiButton from "@mui/material/Button";
 import { getErrorMessage } from "api/errors";
 import {
 	addMember,
@@ -18,7 +17,7 @@ import type {
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
-import { Button as ShadcnButton } from "components/Button/Button";
+import { Button } from "components/Button/Button";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
 import {
 	DropdownMenu,
@@ -35,6 +34,7 @@ import {
 	SettingsHeaderDescription,
 	SettingsHeaderTitle,
 } from "components/SettingsHeader/SettingsHeader";
+import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import {
 	Table,
@@ -121,14 +121,14 @@ const GroupPage: FC = () => {
 
 				{canUpdateGroup && (
 					<Stack direction="row" spacing={2}>
-						<Button
+						<MuiButton
 							component={RouterLink}
 							startIcon={<SettingsIcon className="size-icon-sm" />}
 							to="settings"
 						>
 							Settings
-						</Button>
-						<Button
+						</MuiButton>
+						<MuiButton
 							disabled={groupData?.id === groupData?.organization_id}
 							onClick={() => {
 								setIsDeletingGroup(true);
@@ -137,7 +137,7 @@ const GroupPage: FC = () => {
 							css={styles.removeButton}
 						>
 							Delete&hellip;
-						</Button>
+						</MuiButton>
 					</Stack>
 				)}
 			</Stack>
@@ -279,15 +279,12 @@ const AddGroupMember: FC<AddGroupMemberProps> = ({
 					}}
 				/>
 
-				<LoadingButton
-					loadingPosition="start"
-					disabled={!selectedUser}
-					type="submit"
-					startIcon={<PersonAdd />}
-					loading={isLoading}
-				>
+				<Button disabled={!selectedUser || isLoading} type="submit">
+					<Spinner loading={isLoading}>
+						<PersonAdd />
+					</Spinner>
 					Add user
-				</LoadingButton>
+				</Button>
 			</Stack>
 		</form>
 	);
@@ -332,14 +329,10 @@ const GroupMemberRow: FC<GroupMemberRowProps> = ({
 				{canUpdate && (
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
-							<ShadcnButton
-								size="icon-lg"
-								variant="subtle"
-								aria-label="Open menu"
-							>
+							<Button size="icon-lg" variant="subtle" aria-label="Open menu">
 								<EllipsisVertical aria-hidden="true" />
 								<span className="sr-only">Open menu</span>
-							</ShadcnButton>
+							</Button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent align="end">
 							<DropdownMenuItem