chore: replace MUI LoadingButton - 4 (#17834)

- ScheduleForm
- SecurityForm
- HistorySidebar
- WorkspacesPageView

site/src/pages/UserSettingsPage/SchedulePage/ScheduleForm.tsx

@@ -1,4 +1,3 @@
-import LoadingButton from "@mui/lab/LoadingButton";
 import MenuItem from "@mui/material/MenuItem";
 import TextField from "@mui/material/TextField";
 import type {
@@ -7,7 +6,9 @@ import type {
 } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 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 { Stack } from "components/Stack/Stack";
 import { type FormikContextType, useFormik } from "formik";
 import { type FC, useEffect, useState } from "react";
@@ -137,14 +138,13 @@ export const ScheduleForm: FC<ScheduleFormProps> = ({
 				/>
 
 				<div>
-					<LoadingButton
-						loading={isLoading}
+					<Button
 						disabled={isLoading || !initialValues.user_can_set}
 						type="submit"
-						variant="contained"
 					>
+						<Spinner loading={isLoading} />
 						Update schedule
-					</LoadingButton>
+					</Button>
 				</div>
 			</FormFields>
 		</Form>

site/src/pages/UserSettingsPage/SecurityPage/SecurityForm.tsx

@@ -1,9 +1,10 @@
-import LoadingButton from "@mui/lab/LoadingButton";
 import TextField from "@mui/material/TextField";
 import { Alert } from "components/Alert/Alert";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { Form, FormFields } from "components/Form/Form";
 import { PasswordField } from "components/PasswordField/PasswordField";
+import { Spinner } from "components/Spinner/Spinner";
 import { type FormikContextType, useFormik } from "formik";
 import type { FC } from "react";
 import { getFormHelpers } from "utils/formUtils";
@@ -98,13 +99,10 @@ export const SecurityForm: FC<SecurityFormProps> = ({
 					/>
 
 					<div>
-						<LoadingButton
-							loading={isLoading}
-							type="submit"
-							variant="contained"
-						>
+						<Button disabled={isLoading} type="submit">
+							<Spinner loading={isLoading} />
 							{Language.updatePassword}
-						</LoadingButton>
+						</Button>
 					</div>
 				</FormFields>
 			</Form>

site/src/pages/WorkspacePage/HistorySidebar.tsx

@@ -1,13 +1,14 @@
 import ArrowDownwardOutlined from "@mui/icons-material/ArrowDownwardOutlined";
-import LoadingButton from "@mui/lab/LoadingButton";
 import { infiniteWorkspaceBuilds } from "api/queries/workspaceBuilds";
 import type { Workspace } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import {
 	Sidebar,
 	SidebarCaption,
 	SidebarItem,
 	SidebarLink,
 } from "components/FullPageLayout/Sidebar";
+import { Spinner } from "components/Spinner/Spinner";
 import {
 	WorkspaceBuildData,
 	WorkspaceBuildDataSkeleton,
@@ -46,22 +47,17 @@ export const HistorySidebar: FC<HistorySidebarProps> = ({ workspace }) => {
 					))}
 			{buildsQuery.hasNextPage && (
 				<div css={{ padding: 16 }}>
-					<LoadingButton
-						fullWidth
+					<Button
 						onClick={() => buildsQuery.fetchNextPage()}
-						loading={buildsQuery.isFetchingNextPage}
-						loadingPosition="start"
-						variant="outlined"
-						color="neutral"
-						startIcon={<ArrowDownwardOutlined />}
-						css={{
-							display: "inline-flex",
-							borderRadius: "9999px",
-							fontSize: 13,
-						}}
+						disabled={buildsQuery.isFetchingNextPage}
+						variant="outline"
+						className="w-full"
 					>
+						<Spinner loading={buildsQuery.isFetchingNextPage}>
+							<ArrowDownwardOutlined />
+						</Spinner>
 						Show more builds
-					</LoadingButton>
+					</Button>
 				</div>
 			)}
 		</Sidebar>

site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

@@ -1,5 +1,4 @@
 import CloudQueue from "@mui/icons-material/CloudQueue";
-import LoadingButton from "@mui/lab/LoadingButton";
 import { hasError, isApiValidationError } from "api/errors";
 import type { Template, Workspace } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -16,6 +15,7 @@ import { Margins } from "components/Margins/Margins";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
 import { PaginationHeader } from "components/PaginationWidget/PaginationHeader";
 import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidgetBase";
+import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { TableToolbar } from "components/TableToolbar/TableToolbar";
 import { ChevronDownIcon, PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
@@ -135,16 +135,17 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
-								<LoadingButton
-									loading={isRunningBatchAction}
-									loadingPosition="end"
-									variant="text"
-									size="small"
+								<Button
+									disabled={isRunningBatchAction}
+									variant="outline"
+									size="sm"
 									css={{ borderRadius: 9999, marginLeft: "auto" }}
-									endIcon={<ChevronDownIcon className="size-4" />}
 								>
 									Bulk actions
-								</LoadingButton>
+									<Spinner loading={isRunningBatchAction}>
+										<ChevronDownIcon className="size-4" />
+									</Spinner>
+								</Button>
 							</DropdownMenuTrigger>
 							<DropdownMenuContent align="end">
 								<DropdownMenuItem