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 = { } 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() { 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( } handle={{ crumb: 'New Floating IP' }} />