From 4e345707928f9af05f835c64ef6a5913805dec24 Mon Sep 17 00:00:00 2001
From: Kenneth <kennethnym@hey.com>
Date: Tue, 3 Dec 2024 15:18:19 +0000
Subject: [PATCH] feat: add loading state when creating workspace

---
 web/src/workspaces/new-workspace-dialog.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/src/workspaces/new-workspace-dialog.tsx b/web/src/workspaces/new-workspace-dialog.tsx
index 3fe1349..79e33c5 100644
--- a/web/src/workspaces/new-workspace-dialog.tsx
+++ b/web/src/workspaces/new-workspace-dialog.tsx
@@ -117,8 +117,11 @@ function NewWorkspaceForm({
 	runtimes: WorkspaceRuntime[];
 	onCreateSuccess: () => void;
 }) {
+	const { createWorkspace, status } = useCreateWorkspace();
+	const isCreating = status.type === "loading";
 	const form = useForm({
 		resolver: superstructResolver(NewWorkspaceFormSchema),
+		disabled: isCreating,
 		defaultValues: {
 			workspaceName: "",
 			// image is in the form "imageTag imageId" (space as separator)
@@ -127,7 +130,6 @@ function NewWorkspaceForm({
 			runtime: "",
 		},
 	});
-	const { createWorkspace, status } = useCreateWorkspace();
 	const { toast } = useToast();
 	const formRef = useRef<HTMLFormElement | null>(null);
 
@@ -261,7 +263,10 @@ function NewWorkspaceForm({
 				/>
 
 				<DialogFooter>
-					<Button type="submit">Create</Button>
+					<Button disabled={isCreating} type="submit">
+						{isCreating ? <LoadingSpinner /> : null}
+						Create
+					</Button>
 				</DialogFooter>
 			</form>
 		</Form>