diff --git a/app/react/kubernetes/applications/CreateView/application-services/KubeServicesForm.tsx b/app/react/kubernetes/applications/CreateView/application-services/KubeServicesForm.tsx index 248e782ae..5e223a8ad 100644 --- a/app/react/kubernetes/applications/CreateView/application-services/KubeServicesForm.tsx +++ b/app/react/kubernetes/applications/CreateView/application-services/KubeServicesForm.tsx @@ -2,6 +2,11 @@ import { useEffect, useMemo, useState } from 'react'; import { FormikErrors } from 'formik'; import { KubernetesApplicationPublishingTypes } from '@/kubernetes/models/application/models'; +import { useEnvironmentId } from '@/react/hooks/useEnvironmentId'; +import { + useIngressControllers, + useIngresses, +} from '@/react/kubernetes/ingresses/queries'; import { FormSection } from '@@/form-components/FormSection'; @@ -50,6 +55,11 @@ export function KubeServicesForm({ const [selectedServiceType, setSelectedServiceType] = useState('ClusterIP'); + // start loading ingresses and controllers early to reduce perceived loading time + const environmentId = useEnvironmentId(); + useIngresses(environmentId, namespace ? [namespace] : []); + useIngressControllers(environmentId, namespace); + // when the appName changes, update the names for each service // and the serviceNames for each service port const newServiceNames = useMemo( diff --git a/app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathsForm.tsx b/app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathsForm.tsx index f97c5bb63..a8fc2f9f1 100644 --- a/app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathsForm.tsx +++ b/app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathsForm.tsx @@ -44,13 +44,10 @@ export function AppIngressPathsForm({ namespace ? [namespace] : undefined ); const { data: ingresses } = ingressesQuery; - const ingressControllersQuery = useIngressControllers( - environmentId, - namespace - ); - const { data: ingressControllers } = ingressControllersQuery; + const { data: ingressControllers, ...ingressControllersQuery } = + useIngressControllers(environmentId, namespace); - // if some ingress controllers are restricted by namespace, then filter the ingresses that use allowed ingress controllers + // filter for the ingresses that use allowed ingress controllers const allowedIngressHostNameOptions = useMemo(() => { const allowedIngressClasses = ingressControllers diff --git a/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx b/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx index 87dd61829..dfca276e0 100644 --- a/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx +++ b/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx @@ -68,7 +68,8 @@ export function CreateIngressView() { ); const ingressControllersResults = useIngressControllers( environmentId, - namespace + namespace, + 0 ); const createIngressMutation = useCreateIngress(); diff --git a/app/react/kubernetes/ingresses/queries.ts b/app/react/kubernetes/ingresses/queries.ts index d532968ac..fe887892a 100644 --- a/app/react/kubernetes/ingresses/queries.ts +++ b/app/react/kubernetes/ingresses/queries.ts @@ -177,7 +177,8 @@ export function useDeleteIngresses() { */ export function useIngressControllers( environmentId: EnvironmentId, - namespace?: string + namespace?: string, + cacheTime?: number ) { return useQuery( [ @@ -192,7 +193,7 @@ export function useIngressControllers( namespace ? getIngressControllers(environmentId, namespace) : [], { enabled: !!namespace, - cacheTime: 0, + cacheTime, ...withError('Unable to get ingress controllers'), } );