prefetch VPCs/Subnets so networking tab loads without skeleton cells

app/pages/project/instances/NetworkingTab.tsx

@@ -128,12 +128,25 @@ const staticSubnetCols = [
 export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { project, instance } = getInstanceSelector(params)
   await Promise.all([
-    queryClient.fetchQuery(
-      q(api.instanceNetworkInterfaceList, {
-        // we want this to cover all NICs; TODO: determine actual limit?
-        query: { project, instance, limit: ALL_ISH },
-      })
-    ),
+    // Prefetch the by-ID subnet views the NIC table's subnet cells look up, so
+    // SubnetNameFromId hits a warm cache. subnetIds come from the NIC list, so
+    // chain off it; NICs usually share a subnet, so dedupe (≤8 NICs, typically 1).
+    // VPC cells are handled by seeding vpcView from the vpcList fetch below.
+    queryClient
+      .fetchQuery(
+        q(api.instanceNetworkInterfaceList, {
+          // we want this to cover all NICs; TODO: determine actual limit?
+          query: { project, instance, limit: ALL_ISH },
+        })
+      )
+      .then((nics) => {
+        const subnetIds = [...new Set(nics.items.map((n) => n.subnetId))]
+        return Promise.all(
+          subnetIds.map((subnet) =>
+            queryClient.prefetchQuery(q(api.vpcSubnetView, { path: { subnet } }))
+          )
+        )
+      }),
     queryClient.fetchQuery(q(api.floatingIpList, { query: { project, limit: ALL_ISH } })),
     queryClient.fetchQuery(
       q(api.externalSubnetList, { query: { project, limit: ALL_ISH } })
@@ -172,8 +185,15 @@ 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 } })),
+    // Fetch VPCs for the Add NIC form, and seed vpcView-by-id so the NIC
+    // table's VPC cells (VpcNameFromId) render without a skeleton.
+    queryClient
+      .fetchQuery(q(api.vpcList, { query: { project, limit: ALL_ISH } }))
+      .then((vpcs) => {
+        for (const vpc of vpcs.items) {
+          queryClient.setQueryData(q(api.vpcView, { path: { vpc: vpc.id } }).queryKey, vpc)
+        }
+      }),
   ])
   return null
 }