Use loading spinner for create

bryphe-coder · bryphe-coder · commit 538bfba67b66 · 2022-01-25T20:36:21.000Z
diff --git a/site/forms/CreateProjectForm.tsx b/site/forms/CreateProjectForm.tsx
@@ -11,7 +11,7 @@ import {
   formDropdownFieldFactory,
   DropdownItem,
 } from "../components/Form"
-
+import { LoadingButton } from "../components/Button"
 import { Organization, Project, Provisioner, CreateProjectRequest } from "./../api"
 
 export interface CreateProjectFormProps {
@@ -109,7 +109,8 @@ export const CreateProjectForm: React.FC<CreateProjectFormProps> = ({
         <Button className={styles.button} onClick={onCancel} variant="outlined">
           Cancel
         </Button>
-        <Button
+        <LoadingButton
+          loading={form.isSubmitting}
           className={styles.button}
           onClick={() => {
             console.log("submit clicked: " + JSON.stringify(form.values))
@@ -120,7 +121,7 @@ export const CreateProjectForm: React.FC<CreateProjectFormProps> = ({
           type="submit"
         >
           Submit
-        </Button>
+        </LoadingButton>
       </div>
     </div>
   )
@@ -129,6 +130,7 @@ export const CreateProjectForm: React.FC<CreateProjectFormProps> = ({
 const useStyles = makeStyles(() => ({
   root: {
     maxWidth: "1380px",
+    width: "100%",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
diff --git a/site/pages/projects/create.tsx b/site/pages/projects/create.tsx
@@ -49,6 +49,7 @@ const useStyles = makeStyles((theme) => ({
   root: {
     display: "flex",
     flexDirection: "column",
+    alignItems: "center",
     height: "100vh",
     backgroundColor: theme.palette.background.paper,
   },
