fix: correctly display loading spinner (#16167)

Update the usages of the new spinner component to correctly set the
loading prop

site/src/components/Dialogs/Dialog.tsx

@@ -48,7 +48,7 @@ export const DialogActionButtons: FC<DialogActionButtonsProps> = ({
 					data-testid="confirm-button"
 					type="submit"
 				>
-					{confirmLoading && <Spinner loading />}
+					<Spinner loading={confirmLoading} />
 					{confirmText}
 				</Button>
 			)}

site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx

@@ -357,7 +357,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
 					Cancel
 				</Button>
 				<Button type="submit" disabled={isSubmitting}>
-					{isSubmitting && <Spinner />}
+					<Spinner loading={isSubmitting} />
 					{jobError ? "Retry" : "Save"}
 				</Button>
 				{logs && (

site/src/pages/CreateTokenPage/CreateTokenForm.tsx

@@ -152,7 +152,7 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
 					Cancel
 				</Button>
 				<Button type="submit" disabled={isCreating}>
-					{isCreating && <Spinner />}
+					<Spinner loading={isCreating} />
 					{creationFailed ? "Retry" : "Create token"}
 				</Button>
 			</FormFooter>

site/src/pages/CreateUserPage/CreateUserForm.tsx

@@ -210,7 +210,7 @@ export const CreateUserForm: FC<
 						Cancel
 					</Button>
 					<Button type="submit" disabled={isLoading}>
-						{isLoading && <Spinner />}
+						<Spinner loading={isLoading} />
 						Save
 					</Button>
 				</FormFooter>

site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx

@@ -322,7 +322,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 						type="submit"
 						disabled={creatingWorkspace || !hasAllRequiredExternalAuth}
 					>
-						{creatingWorkspace && <Spinner />}
+						<Spinner loading={creatingWorkspace} />
 						Create workspace
 					</Button>
 				</FormFooter>

site/src/pages/GroupsPage/SettingsGroupPageView.tsx

@@ -113,7 +113,7 @@ const UpdateGroupForm: FC<UpdateGroupFormProps> = ({
 					</Button>
 
 					<Button type="submit" disabled={isLoading}>
-						{isLoading && <Spinner />}
+						<Spinner loading={isLoading} />
 						Save
 					</Button>
 				</FormFooter>

site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx

@@ -99,6 +99,7 @@ export const CreateEditRolePageView: FC<CreateEditRolePageViewProps> = ({
 								form.handleSubmit();
 							}}
 						>
+							<Spinner loading={isLoading} />
 							{role !== undefined ? "Save" : "Create Role"}
 						</Button>
 					</div>
@@ -141,7 +142,7 @@ export const CreateEditRolePageView: FC<CreateEditRolePageViewProps> = ({
 						</Button>
 
 						<Button type="submit" disabled={isLoading}>
-							{isLoading && <Spinner />}
+							<Spinner loading={isLoading} />
 							{role ? "Save role" : "Create Role"}
 						</Button>
 					</FormFooter>

site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx

@@ -100,7 +100,7 @@ export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
 					</Button>
 
 					<Button type="submit" disabled={isLoading}>
-						{isLoading && <Spinner />}
+						<Spinner loading={isLoading} />
 						Save
 					</Button>
 				</FormFooter>

site/src/pages/ManagementSettingsPage/GroupsPage/GroupSettingsPageView.tsx

@@ -124,7 +124,7 @@ const UpdateGroupForm: FC<UpdateGroupFormProps> = ({
 				</Button>
 
 				<Button type="submit" disabled={isLoading}>
-					{isLoading && <Spinner />}
+					<Spinner loading={isLoading} />
 					Save
 				</Button>
 			</FormFooter>

site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import { isApiValidationError } from "api/errors";
 import type {
@@ -7,6 +6,7 @@ import type {
 	UpdateOrganizationRequest,
 } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
 import {
 	FormFields,
@@ -119,7 +119,7 @@ export const OrganizationSettingsPageView: FC<
 
 				<FormFooter>
 					<Button type="submit" disabled={form.isSubmitting}>
-						{form.isSubmitting && <Spinner />}
+						<Spinner loading={form.isSubmitting} />
 						Save
 					</Button>
 				</FormFooter>
@@ -133,11 +133,7 @@ export const OrganizationSettingsPageView: FC<
 					>
 						<div css={styles.dangerSettings}>
 							<span>Deleting an organization is irreversible.</span>
-							<Button
+							<Button variant="destructive" onClick={() => setIsDeleting(true)}>
-								css={styles.dangerButton}
-								color="warning"
-								onClick={() => setIsDeleting(true)}
-							>
 								Delete this organization
 							</Button>
 						</div>

site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx

@@ -298,7 +298,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
 				</Button>
 
 				<Button type="submit" disabled={isSubmitting}>
-					{isSubmitting && <Spinner />}
+					<Spinner loading={isSubmitting} />
 					Save
 				</Button>
 			</FormFooter>

site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx

@@ -639,7 +639,7 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
 					type="submit"
 					disabled={isSubmitting || !form.isValid || !form.dirty}
 				>
-					{isSubmitting && <Spinner />}
+					<Spinner loading={isSubmitting} />
 					Save
 				</Button>
 			</FormFooter>

site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesForm.tsx

@@ -114,7 +114,7 @@ export const TemplateVariablesForm: FC<TemplateVariablesForm> = ({
 				</Button>
 
 				<Button type="submit" disabled={isSubmitting}>
-					{isSubmitting && <Spinner />}
+					<Spinner loading={isSubmitting} />
 					Save
 				</Button>
 			</FormFooter>

site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersForm.tsx

@@ -165,7 +165,7 @@ export const WorkspaceParametersForm: FC<WorkspaceParameterFormProps> = ({
 						type="submit"
 						disabled={isSubmitting || disabled || !form.dirty}
 					>
-						{isSubmitting && <Spinner />}
+						<Spinner loading={isSubmitting} />
 						Submit and restart
 					</Button>
 				</FormFooter>

site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx

@@ -456,7 +456,7 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
 						(!template.allow_user_autostart && !template.allow_user_autostop)
 					}
 				>
-					{isLoading && <Spinner />}
+					<Spinner loading={isLoading} />
 					Save
 				</Button>
 			</FormFooter>

site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx

@@ -123,7 +123,7 @@ export const WorkspaceSettingsForm: FC<WorkspaceSettingsFormProps> = ({
 					</Button>
 
 					<Button type="submit" disabled={form.isSubmitting}>
-						{form.isSubmitting && <Spinner />}
+						<Spinner loading={form.isSubmitting} />
 						Save
 					</Button>
 				</FormFooter>