From e212a20dc1d80a6f5e87ce70b503edae6e670573 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Thu, 22 Feb 2024 21:30:26 -0600
Subject: [PATCH] don't prefetch IP pools for floating IP create

---
 app/forms/floating-ip-create.tsx | 17 +++++------------
 app/routes.tsx                   |  1 -
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/app/forms/floating-ip-create.tsx b/app/forms/floating-ip-create.tsx
index 73d46b44b..365f2f07c 100644
--- a/app/forms/floating-ip-create.tsx
+++ b/app/forms/floating-ip-create.tsx
@@ -11,10 +11,9 @@ import { useNavigate } from 'react-router-dom'
 import type { SetRequired } from 'type-fest'
 
 import {
-  apiQueryClient,
   useApiMutation,
+  useApiQuery,
   useApiQueryClient,
-  usePrefetchedApiQuery,
   type FloatingIpCreate,
   type SiloIpPool,
 } from '@oxide/api'
@@ -32,13 +31,6 @@ import {
 import { useForm, useProjectSelector, useToast } from 'app/hooks'
 import { pb } from 'app/util/path-builder'
 
-CreateFloatingIpSideModalForm.loader = async () => {
-  await apiQueryClient.prefetchQuery('projectIpPoolList', {
-    query: { limit: 1000 },
-  })
-  return null
-}
-
 const toListboxItem = (p: SiloIpPool) => {
   if (!p.isDefault) {
     return { value: p.name, label: p.name }
@@ -66,8 +58,9 @@ const defaultValues: SetRequired<FloatingIpCreate, 'address'> = {
 }
 
 export function CreateFloatingIpSideModalForm() {
-  // Fetch 1000 to we can be sure to get them all.
-  const { data: allPools } = usePrefetchedApiQuery('projectIpPoolList', {
+  // Fetch 1000 to we can be sure to get them all. Don't bother prefetching
+  // because the list is hidden under the Advanced accordion.
+  const { data: allPools } = useApiQuery('projectIpPoolList', {
     query: { limit: 1000 },
   })
 
@@ -126,7 +119,7 @@ export function CreateFloatingIpSideModalForm() {
 
           <ListboxField
             name="pool"
-            items={allPools.items.map((p) => toListboxItem(p))}
+            items={(allPools?.items || []).map((p) => toListboxItem(p))}
             label="IP pool"
             control={form.control}
             placeholder="Select pool"
diff --git a/app/routes.tsx b/app/routes.tsx
index cff0bd192..fc2b73d08 100644
--- a/app/routes.tsx
+++ b/app/routes.tsx
@@ -356,7 +356,6 @@ export const routes = createRoutesFromElements(
           <Route path="floating-ips" handle={{ crumb: 'Floating IPs' }} element={null} />
           <Route
             path="floating-ips-new"
-            loader={CreateFloatingIpSideModalForm.loader}
             element={<CreateFloatingIpSideModalForm />}
             handle={{ crumb: 'New Floating IP' }}
           />