From b19800681f935769b29d3345f31ba5ae1d4c41db Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Mon, 31 Jul 2023 20:18:45 +1200
Subject: [PATCH] fix(app): improve perceived ingress load time [EE-5805]
 (#9946)

Co-authored-by: testa113 <testa113>
---
 .../application-services/KubeServicesForm.tsx          | 10 ++++++++++
 .../ingress/AppIngressPathsForm.tsx                    |  9 +++------
 .../ingresses/CreateIngressView/CreateIngressView.tsx  |  3 ++-
 app/react/kubernetes/ingresses/queries.ts              |  5 +++--
 4 files changed, 18 insertions(+), 9 deletions(-)

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