chore: replace MUI LoadingButton with Button + Spinner - 2 (#17817)

site/src/modules/resources/PortForwardButton.tsx

@@ -2,8 +2,7 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import LockIcon from "@mui/icons-material/Lock";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
 import SensorsIcon from "@mui/icons-material/Sensors";
-import LoadingButton from "@mui/lab/LoadingButton";
-import Button from "@mui/material/Button";
+import MUIButton from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
 import FormControl from "@mui/material/FormControl";
 import Link from "@mui/material/Link";
@@ -27,11 +26,13 @@ import {
 	type WorkspaceAgentPortShareProtocol,
 	WorkspaceAppSharingLevels,
 } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import {
 	HelpTooltipLink,
 	HelpTooltipText,
 	HelpTooltipTitle,
 } from "components/HelpTooltip/HelpTooltip";
+import { Spinner } from "components/Spinner/Spinner";
 import {
 	Popover,
 	PopoverContent,
@@ -76,7 +77,7 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
 	return (
 		<Popover>
 			<PopoverTrigger>
-				<Button
+				<MUIButton
 					disabled={!portsQuery.data}
 					size="small"
 					variant="text"
@@ -95,7 +96,7 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
 					}
 				>
 					Open ports
-				</Button>
+				</MUIButton>
 			</PopoverTrigger>
 			<PopoverContent horizontal="right" classes={{ paper }}>
 				<PortForwardPopoverView
@@ -296,7 +297,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 									required
 									css={styles.newPortInput}
 								/>
-								<Button
+								<MUIButton
 									type="submit"
 									size="small"
 									variant="text"
@@ -313,7 +314,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 											color: theme.palette.text.primary,
 										}}
 									/>
-								</Button>
+								</MUIButton>
 							</form>
 						</Stack>
 					</Stack>
@@ -368,7 +369,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 									alignItems="center"
 								>
 									{canSharePorts && (
-										<Button
+										<MUIButton
 											size="small"
 											variant="text"
 											onClick={async () => {
@@ -382,7 +383,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 											}}
 										>
 											Share
-										</Button>
+										</MUIButton>
 									)}
 								</Stack>
 							</Stack>
@@ -482,7 +483,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 												)}
 											</Select>
 										</FormControl>
-										<Button
+										<MUIButton
 											size="small"
 											variant="text"
 											css={styles.deleteButton}
@@ -501,7 +502,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 													color: theme.palette.text.primary,
 												}}
 											/>
-										</Button>
+										</MUIButton>
 									</Stack>
 								</Stack>
 							);
@@ -550,14 +551,10 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 										disabledPublicMenuItem
 									)}
 								</TextField>
-								<LoadingButton
-									variant="contained"
-									type="submit"
-									loading={isSubmitting}
-									disabled={!form.isValid}
-								>
+								<Button type="submit" disabled={!form.isValid || isSubmitting}>
+									<Spinner loading={isSubmitting} />
 									Share Port
-								</LoadingButton>
+								</Button>
 							</Stack>
 						</form>
 					</div>

site/src/pages/HealthPage/DismissWarningButton.tsx

@@ -1,10 +1,11 @@
 import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined";
 import NotificationOutlined from "@mui/icons-material/NotificationsOutlined";
-import LoadingButton from "@mui/lab/LoadingButton";
 import Skeleton from "@mui/material/Skeleton";
 import { healthSettings, updateHealthSettings } from "api/queries/debug";
 import type { HealthSection } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
+import { Spinner } from "components/Spinner/Spinner";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 
 export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
@@ -33,11 +34,9 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
 
 	if (isDismissed) {
 		return (
-			<LoadingButton
-				disabled={healthSettingsQuery.isLoading}
-				loading={enableMutation.isLoading}
-				loadingPosition="start"
-				startIcon={<NotificationsOffOutlined />}
+			<Button
+				disabled={healthSettingsQuery.isLoading || enableMutation.isLoading}
+				variant="outline"
 				onClick={async () => {
 					const updatedSettings = dismissed_healthchecks.filter(
 						(dismissedHealthcheck) =>
@@ -49,17 +48,18 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
 					displaySuccess("Warnings enabled successfully!");
 				}}
 			>
+				<Spinner loading={enableMutation.isLoading}>
+					<NotificationsOffOutlined />
+				</Spinner>
 				Enable warnings
-			</LoadingButton>
+			</Button>
 		);
 	}
 
 	return (
-		<LoadingButton
-			disabled={healthSettingsQuery.isLoading}
-			loading={dismissMutation.isLoading}
-			loadingPosition="start"
-			startIcon={<NotificationOutlined />}
+		<Button
+			disabled={healthSettingsQuery.isLoading || dismissMutation.isLoading}
+			variant="outline"
 			onClick={async () => {
 				const updatedSettings = [...dismissed_healthchecks, props.healthcheck];
 				await dismissMutation.mutateAsync({
@@ -68,7 +68,10 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
 				displaySuccess("Warnings dismissed successfully!");
 			}}
 		>
+			<Spinner loading={dismissMutation.isLoading}>
+				<NotificationOutlined />
+			</Spinner>
 			Dismiss warnings
-		</LoadingButton>
+		</Button>
 	);
 };

site/src/pages/LoginPage/PasswordSignInForm.tsx

@@ -1,6 +1,7 @@
-import LoadingButton from "@mui/lab/LoadingButton";
 import Link from "@mui/material/Link";
 import TextField from "@mui/material/TextField";
+import { Button } from "components/Button/Button";
+import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { useFormik } from "formik";
 import type { FC } from "react";
@@ -59,14 +60,15 @@ export const PasswordSignInForm: FC<PasswordSignInFormProps> = ({
 					label={Language.passwordLabel}
 					type="password"
 				/>
-				<LoadingButton
-					size="xlarge"
-					loading={isSigningIn}
-					fullWidth
+				<Button
+					size="lg"
+					disabled={isSigningIn}
+					className="w-full"
 					type="submit"
 				>
+					<Spinner loading={isSigningIn} />
 					{Language.passwordSignIn}
-				</LoadingButton>
+				</Button>
 				<Link
 					component={RouterLink}
 					to="/reset-password"

site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx

@@ -1,5 +1,4 @@
 import PersonAdd from "@mui/icons-material/PersonAdd";
-import LoadingButton from "@mui/lab/LoadingButton";
 import { getErrorMessage } from "api/errors";
 import type {
 	Group,
@@ -24,6 +23,7 @@ import {
 	SettingsHeader,
 	SettingsHeaderTitle,
 } from "components/SettingsHeader/SettingsHeader";
+import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import {
 	Table,
@@ -237,15 +237,16 @@ const AddOrganizationMember: FC<AddOrganizationMemberProps> = ({
 					}}
 				/>
 
-				<LoadingButton
-					loadingPosition="start"
-					disabled={!selectedUser}
+				<Button
+					disabled={!selectedUser || isLoading}
 					type="submit"
-					startIcon={<PersonAdd />}
-					loading={isLoading}
+					variant="outline"
 				>
+					<Spinner loading={isLoading}>
+						<PersonAdd />
+					</Spinner>
 					Add user
-				</LoadingButton>
+				</Button>
 			</Stack>
 		</form>
 	);

site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx

@@ -1,12 +1,13 @@
 import type { Interpolation, Theme } 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 { isApiValidationError } from "api/errors";
 import { changePasswordWithOTP } from "api/queries/users";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { CustomLogo } from "components/CustomLogo/CustomLogo";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
+import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { useFormik } from "formik";
 import type { FC } from "react";
@@ -115,16 +116,16 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
 								/>
 
 								<Stack spacing={1}>
-									<LoadingButton
-										loading={form.isSubmitting}
-										type="submit"
-										size="large"
-										fullWidth
-										variant="contained"
-									>
-										Reset password
-									</LoadingButton>
 									<Button
+										disabled={form.isSubmitting}
+										type="submit"
+										size="lg"
+										className="w-full"
+									>
+										<Spinner loading={form.isSubmitting} />
+										Reset password
+									</Button>
+									<MUIButton
 										component={RouterLink}
 										size="large"
 										fullWidth
@@ -132,7 +133,7 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
 										to="/login"
 									>
 										Back to login
-									</Button>
+									</MUIButton>
 								</Stack>
 							</Stack>
 						</fieldset>