make IP range add form a lazy route

Author: david-crespo

app/forms/ip-pool-range-add.tsx

@@ -61,7 +61,9 @@ function resolver(values: IpRange) {
   return Object.keys(errors).length > 0 ? { values: {}, errors } : { values, errors: {} }
 }
 
-export function IpPoolAddRangeSideModalForm() {
+Component.displayName = 'IpPoolAddRangeSideModalForm'
+
+export function Component() {
   const { pool } = useIpPoolSelector()
   const navigate = useNavigate()
   const queryClient = useApiQueryClient()

app/routes.tsx

@@ -25,7 +25,6 @@ import { CreateImageSideModalForm } from './forms/image-upload'
 import { CreateInstanceForm } from './forms/instance-create'
 import { CreateIpPoolSideModalForm } from './forms/ip-pool-create'
 import { EditIpPoolSideModalForm } from './forms/ip-pool-edit'
-import { IpPoolAddRangeSideModalForm } from './forms/ip-pool-range-add'
 import { CreateProjectSideModalForm } from './forms/project-create'
 import { EditProjectSideModalForm } from './forms/project-edit'
 import { CreateSiloSideModalForm } from './forms/silo-create'
@@ -213,7 +212,8 @@ export const routes = createRoutesFromElements(
               loader={EditIpPoolSideModalForm.loader}
               handle={{ crumb: 'Edit IP pool' }}
             />
-            <Route path="ranges-add" element={<IpPoolAddRangeSideModalForm />} />
+            {/* Lazy because of IP address validation code */}
+            <Route path="ranges-add" lazy={() => import('app/forms/ip-pool-range-add')} />
           </Route>
         </Route>
       </Route>