fix(app): improve perceived ingress load time [EE-5805] (#9946)

Co-authored-by: testa113 <testa113>

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<ServiceTypeValue>('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(

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

app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx

@@ -68,7 +68,8 @@ export function CreateIngressView() {
   );
   const ingressControllersResults = useIngressControllers(
     environmentId,
-    namespace
+    namespace,
+    0
   );
 
   const createIngressMutation = useCreateIngress();

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'),
     }
   );