Fetch and prefill VPC list in NIC forms

app/forms/instance-create.tsx

@@ -170,6 +170,8 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
     queryClient.prefetchQuery(
       q(api.floatingIpList, { query: { project, limit: ALL_ISH } })
     ),
+    // Fetch VPCs for custom NIC form
+    queryClient.prefetchQuery(q(api.vpcList, { query: { project, limit: ALL_ISH } })),
   ])
   return null
 }

app/forms/network-interface-create.tsx

@@ -5,12 +5,15 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useQuery } from '@tanstack/react-query'
-import { useMemo } from 'react'
 import { useForm } from 'react-hook-form'
-import type { SetNonNullable, SetRequired } from 'type-fest'
 
-import { api, q, type ApiError, type InstanceNetworkInterfaceCreate } from '@oxide/api'
+import {
+  api,
+  q,
+  usePrefetchedQuery,
+  type ApiError,
+  type InstanceNetworkInterfaceCreate,
+} from '@oxide/api'
 
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { ListboxField } from '~/components/form/fields/ListboxField'
@@ -20,14 +23,7 @@ import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { useProjectSelector } from '~/hooks/use-params'
 import { FormDivider } from '~/ui/lib/Divider'
-
-const defaultValues: SetRequired<SetNonNullable<InstanceNetworkInterfaceCreate>, 'ip'> = {
-  name: '',
-  description: '',
-  ip: '',
-  subnetName: '',
-  vpcName: '',
-}
+import { ALL_ISH } from '~/util/consts'
 
 type CreateNetworkInterfaceFormProps = {
   onDismiss: () => void
@@ -47,12 +43,17 @@ export function CreateNetworkInterfaceForm({
   submitError = null,
 }: CreateNetworkInterfaceFormProps) {
   const projectSelector = useProjectSelector()
-
-  const { data: vpcsData } = useQuery(q(api.vpcList, { query: projectSelector }))
-  const vpcs = useMemo(() => vpcsData?.items || [], [vpcsData])
-
+  const {
+    data: { items: vpcs },
+  } = usePrefetchedQuery(q(api.vpcList, { query: { ...projectSelector, limit: ALL_ISH } }))
+  const defaultValues = {
+    name: '',
+    description: '',
+    ip: '',
+    subnetName: '',
+    vpcName: vpcs.length > 0 ? vpcs[0].name : '',
+  }
   const form = useForm({ defaultValues })
-
   return (
     <SideModalForm
       form={form}

app/pages/project/instances/NetworkingTab.tsx

@@ -128,6 +128,8 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
           queryClient.setQueryData(queryKey, { type: 'success', data: pool })
         }
       }),
+    // Fetch VPCs for Add NIC form
+    queryClient.fetchQuery(q(api.vpcList, { query: { project, limit: ALL_ISH } })),
   ])
   return null
 }