chore: replace MUI LoadingButton - 3 (#17833)

- RequestOTPPage
- SetupPageView
- TemplatePermissionsPageView
- AccountForm
- ExternalAuthPageView

site/src/pages/ResetPasswordPage/RequestOTPPage.tsx

@@ -1,10 +1,11 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import LoadingButton from "@mui/lab/LoadingButton";
-import Button from "@mui/material/Button";
+import MuiButton from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import { requestOneTimePassword } from "api/queries/users";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { CustomLogo } from "components/CustomLogo/CustomLogo";
+import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
@@ -88,16 +89,16 @@ const RequestOTP: FC<RequestOTPProps> = ({
 							/>
 
 							<Stack spacing={1}>
-								<LoadingButton
-									loading={isRequesting}
-									type="submit"
-									size="large"
-									fullWidth
-									variant="contained"
-								>
-									Reset password
-								</LoadingButton>
 								<Button
+									disabled={isRequesting}
+									type="submit"
+									size="lg"
+									className="w-full"
+								>
+									<Spinner loading={isRequesting} />
+									Reset password
+								</Button>
+								<MuiButton
 									component={RouterLink}
 									size="large"
 									fullWidth
@@ -105,7 +106,7 @@ const RequestOTP: FC<RequestOTPProps> = ({
 									to="/login"
 								>
 									Cancel
-								</Button>
+								</MuiButton>
 							</Stack>
 						</Stack>
 					</fieldset>
@@ -150,9 +151,9 @@ const RequestOTPSuccess: FC<{ email: string }> = ({ email }) => {
 					Contact your deployment administrator if you encounter issues.
 				</p>
 
-				<Button component={RouterLink} to="/login">
+				<MuiButton component={RouterLink} to="/login">
 					Back to login
-				</Button>
+				</MuiButton>
 			</div>
 		</div>
 	);

site/src/pages/SetupPage/SetupPageView.tsx

@@ -1,8 +1,7 @@
 import GitHubIcon from "@mui/icons-material/GitHub";
-import LoadingButton from "@mui/lab/LoadingButton";
 import AlertTitle from "@mui/material/AlertTitle";
 import Autocomplete from "@mui/material/Autocomplete";
-import Button from "@mui/material/Button";
+import MuiButton from "@mui/material/Button";
 import Checkbox from "@mui/material/Checkbox";
 import Link from "@mui/material/Link";
 import MenuItem from "@mui/material/MenuItem";
@@ -11,10 +10,12 @@ import { countries } from "api/countriesGenerated";
 import type * as TypesGen from "api/typesGenerated";
 import { isAxiosError } from "axios";
 import { Alert, AlertDetail } from "components/Alert/Alert";
+import { Button } from "components/Button/Button";
 import { FormFields, VerticalForm } from "components/Form/Form";
 import { CoderIcon } from "components/Icons/CoderIcon";
 import { PasswordField } from "components/PasswordField/PasswordField";
 import { SignInLayout } from "components/SignInLayout/SignInLayout";
+import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { type FormikContextType, useFormik } from "formik";
 import type { ChangeEvent, FC } from "react";
@@ -172,7 +173,7 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 				<FormFields>
 					{authMethods?.github.enabled && (
 						<>
-							<Button
+							<MuiButton
 								fullWidth
 								component="a"
 								href="/api/v2/users/oauth2/github/callback"
@@ -182,7 +183,7 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 								size="xlarge"
 							>
 								{Language.githubCreate}
-							</Button>
+							</MuiButton>
 							<div className="flex items-center gap-4">
 								<div className="h-[1px] w-full bg-border" />
 								<div className="shrink-0 text-xs uppercase text-content-secondary tracking-wider">
@@ -376,15 +377,16 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 						</Alert>
 					)}
 
-					<LoadingButton
-						fullWidth
-						loading={isLoading}
+					<Button
+						className="w-full"
+						disabled={isLoading}
 						type="submit"
 						data-testid="create"
-						size="xlarge"
+						size="lg"
 					>
+						<Spinner loading={isLoading} />
 						{Language.create}
-					</LoadingButton>
+					</Button>
 				</FormFields>
 			</VerticalForm>
 		</SignInLayout>

site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx

@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import PersonAdd from "@mui/icons-material/PersonAdd";
-import LoadingButton from "@mui/lab/LoadingButton";
 import MenuItem from "@mui/material/MenuItem";
 import Select, { type SelectProps } from "@mui/material/Select";
 import Table from "@mui/material/Table";
@@ -29,6 +28,7 @@ import {
 } from "components/DropdownMenu/DropdownMenu";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
+import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import { EllipsisVertical } from "lucide-react";
@@ -116,15 +116,15 @@ const AddTemplateUserOrGroup: FC<AddTemplateUserOrGroupProps> = ({
 					</MenuItem>
 				</Select>
 
-				<LoadingButton
-					loadingPosition="start"
-					disabled={!selectedRole || !selectedOption}
+				<Button
+					disabled={!selectedRole || !selectedOption || isLoading}
 					type="submit"
-					startIcon={<PersonAdd />}
-					loading={isLoading}
 				>
+					<Spinner loading={isLoading}>
+						<PersonAdd />
+					</Spinner>
 					Add member
-				</LoadingButton>
+				</Button>
 			</Stack>
 		</form>
 	);

site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx

@@ -1,8 +1,9 @@
-import LoadingButton from "@mui/lab/LoadingButton";
 import TextField from "@mui/material/TextField";
 import type { UpdateUserProfileRequest } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { Form, FormFields } from "components/Form/Form";
+import { Spinner } from "components/Spinner/Spinner";
 import { type FormikTouched, useFormik } from "formik";
 import type { FC } from "react";
 import {
@@ -86,9 +87,10 @@ export const AccountForm: FC<AccountFormProps> = ({
 				/>
 
 				<div>
-					<LoadingButton loading={isLoading} type="submit" variant="contained">
+					<Button disabled={isLoading} type="submit">
+						<Spinner loading={isLoading} />
 						{Language.updateSettings}
-					</LoadingButton>
+					</Button>
 				</div>
 			</FormFields>
 		</Form>

site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx

@@ -1,6 +1,5 @@
 import { useTheme } from "@emotion/react";
 import AutorenewIcon from "@mui/icons-material/Autorenew";
-import LoadingButton from "@mui/lab/LoadingButton";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -25,6 +24,7 @@ import {
 	DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
 import { Loader } from "components/Loader/Loader";
+import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { TableEmpty } from "components/TableEmpty/TableEmpty";
 import { EllipsisVertical } from "lucide-react";
@@ -165,17 +165,16 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
 				</Stack>
 			</TableCell>
 			<TableCell css={{ textAlign: "right" }}>
-				<LoadingButton
-					disabled={authenticated}
-					variant="contained"
-					loading={externalAuthPollingState === "polling"}
+				<Button
+					disabled={authenticated || externalAuthPollingState === "polling"}
 					onClick={() => {
 						window.open(authURL, "_blank", "width=900,height=600");
 						startPollingExternalAuth();
 					}}
 				>
+					<Spinner loading={externalAuthPollingState === "polling"} />
 					{authenticated ? "Authenticated" : "Click to Login"}
-				</LoadingButton>
+				</Button>
 			</TableCell>
 			<TableCell>
 				<DropdownMenu>