disable form elements when submitting instance create form (#2043)

Author: charliepark

app/components/form/fields/FileField.tsx

@@ -25,6 +25,7 @@ export function FileField<
   required = false,
   accept,
   description,
+  disabled,
 }: {
   id: string
   name: TName
@@ -34,6 +35,7 @@ export function FileField<
   required?: boolean
   accept?: string
   description?: string | React.ReactNode
+  disabled?: boolean
 }) {
   return (
     <Controller
@@ -55,7 +57,14 @@ export function FileField<
               <TextInputHint id={`${id}-help-text`}>{description}</TextInputHint>
             )}
           </div>
-          <FileInput id={id} className="mt-2" accept={accept} {...rest} error={!!error} />
+          <FileInput
+            id={id}
+            className="mt-2"
+            accept={accept}
+            disabled={disabled}
+            {...rest}
+            error={!!error}
+          />
           <ErrorMessage error={error} label={label} />
         </div>
       )}

app/components/form/fields/SshKeysField.tsx

@@ -48,7 +48,13 @@ const CloudInitMessage = () => (
   />
 )
 
-export function SshKeysField({ control }: { control: Control<InstanceCreateInput> }) {
+export function SshKeysField({
+  control,
+  isSubmitting,
+}: {
+  control: Control<InstanceCreateInput>
+  isSubmitting: boolean
+}) {
   const keys = usePrefetchedApiQuery('currentUserSshKeyList', {}).data?.items || []
   const [showAddSshKey, setShowAddSshKey] = useState(false)
 
@@ -85,6 +91,7 @@ export function SshKeysField({ control }: { control: Control<InstanceCreateInput
                   control={control}
                   value={key.id}
                   key={key.id}
+                  disabled={isSubmitting}
                 >
                   {key.name}
                 </CheckboxField>
@@ -101,12 +108,18 @@ export function SshKeysField({ control }: { control: Control<InstanceCreateInput
               onChange={() =>
                 onChange(value.length < keys.length ? keys.map((key) => key.id) : [])
               }
+              disabled={isSubmitting}
             >
               <span className="select-none">Select all</span>
             </Checkbox>
 
             <div className="space-x-3">
-              <Button variant="ghost" size="sm" onClick={() => setShowAddSshKey(true)}>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowAddSshKey(true)}
+                disabled={isSubmitting}
+              >
                 Add SSH Key
               </Button>
             </div>

app/forms/instance-create.tsx

@@ -276,13 +276,13 @@ export function CreateInstanceForm() {
         </Tabs.Content>
 
         <Tabs.Content value="highCPU">
-          <RadioFieldDyn name="presetId" label="" control={control}>
+          <RadioFieldDyn name="presetId" label="" control={control} disabled={isSubmitting}>
             {renderLargeRadioCards('highCPU')}
           </RadioFieldDyn>
         </Tabs.Content>
 
         <Tabs.Content value="highMemory">
-          <RadioFieldDyn name="presetId" label="" control={control}>
+          <RadioFieldDyn name="presetId" label="" control={control} disabled={isSubmitting}>
             {renderLargeRadioCards('highMemory')}
           </RadioFieldDyn>
         </Tabs.Content>
@@ -419,7 +419,7 @@ export function CreateInstanceForm() {
       <FormDivider />
       <Form.Heading id="authentication">Authentication</Form.Heading>
 
-      <SshKeysField control={control} />
+      <SshKeysField control={control} isSubmitting={isSubmitting} />
 
       <FormDivider />
       <Form.Heading id="advanced">Advanced</Form.Heading>
@@ -478,6 +478,7 @@ const AdvancedAccordion = ({
           name="userData"
           label="User Data"
           control={control}
+          disabled={isSubmitting}
         />
       </AccordionItem>
     </Accordion.Root>