From 5e1594c669df2908abf62422f593a2f8d769cfd5 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Thu, 23 Apr 2026 10:15:15 +0200
Subject: [PATCH 1/2] fix(new-nav): cluster mirroring registry data not loaded

---
 .../$clusterId/settings/image-registry.tsx    | 86 +++++++++++--------
 .../cluster-network-settings.tsx              |  2 +-
 2 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/image-registry.tsx b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/image-registry.tsx
index b4d884e0ba4..8705c846d1e 100644
--- a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/image-registry.tsx
+++ b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/image-registry.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute, useParams } from '@tanstack/react-router'
 import { type ContainerRegistryRequest } from 'qovery-typescript-axios'
+import { Suspense } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useCluster } from '@qovery/domains/clusters/feature'
 import {
@@ -8,7 +9,7 @@ import {
   useEditContainerRegistry,
 } from '@qovery/domains/organizations/feature'
 import { SettingsHeading } from '@qovery/shared/console-shared'
-import { Button, Callout, Icon, Section } from '@qovery/shared/ui'
+import { Button, Callout, Icon, LoaderSpinner, Section } from '@qovery/shared/ui'
 
 export const Route = createFileRoute(
   '/_authenticated/organization/$organizationId/cluster/$clusterId/settings/image-registry'
@@ -17,9 +18,34 @@ export const Route = createFileRoute(
 })
 
 function RouteComponent() {
+  return (
+    <div className="flex w-full flex-col justify-between">
+      <Section className="p-8">
+        <SettingsHeading
+          title="Mirroring registry"
+          description="This mirroring registry is used to store the built images or mirror the container images deployed on this cluster."
+        />
+        <div className="max-w-content-with-navigation-left">
+          <Suspense
+            fallback={
+              <div className="flex flex-1 items-center justify-center">
+                <LoaderSpinner className="w-6" />
+              </div>
+            }
+          >
+            <ImageRegistrySettings />
+          </Suspense>
+        </div>
+      </Section>
+    </div>
+  )
+}
+
+function ImageRegistrySettings() {
   const { organizationId = '', clusterId = '' } = useParams({ strict: false })
   const { data: containerRegistries } = useContainerRegistries({
     organizationId,
+    suspense: true,
   })
   const containerRegistry = containerRegistries?.find((registry) => registry.cluster?.id === clusterId)
   const { mutate: editContainerRegistry, isLoading: isLoadingEditContainerRegistry } = useEditContainerRegistry()
@@ -59,40 +85,30 @@ function RouteComponent() {
   })
 
   return (
-    <div className="flex w-full flex-col justify-between">
-      <Section className="p-8">
-        <SettingsHeading
-          title="Mirroring registry"
-          description="This mirroring registry is used to store the built images or mirror the container images deployed on this cluster."
-        />
-        <div className="max-w-content-with-navigation-left">
-          <FormProvider {...methods}>
-            <form className="flex flex-col" onSubmit={onSubmit}>
-              <ContainerRegistryForm fromEditClusterSettings cluster={cluster} />
-              {(methods.formState.dirtyFields.kind || methods.formState.dirtyFields.url) && (
-                <Callout.Root className="mt-4" color="yellow">
-                  <Callout.Icon>
-                    <Icon iconName="triangle-exclamation" iconStyle="regular" />
-                  </Callout.Icon>
-                  <Callout.Text>
-                    You will have to delete any image stored in the previous container registry manually
-                  </Callout.Text>
-                </Callout.Root>
-              )}
-              <div className="mt-2 flex justify-end">
-                <Button
-                  type="submit"
-                  size="lg"
-                  loading={isLoadingEditContainerRegistry}
-                  disabled={!methods.formState.isValid}
-                >
-                  Save
-                </Button>
-              </div>
-            </form>
-          </FormProvider>
+    <FormProvider {...methods}>
+      <form className="flex flex-col" onSubmit={onSubmit}>
+        <ContainerRegistryForm fromEditClusterSettings cluster={cluster} />
+        {(methods.formState.dirtyFields.kind || methods.formState.dirtyFields.url) && (
+          <Callout.Root className="mt-4" color="yellow">
+            <Callout.Icon>
+              <Icon iconName="triangle-exclamation" iconStyle="regular" />
+            </Callout.Icon>
+            <Callout.Text>
+              You will have to delete any image stored in the previous container registry manually
+            </Callout.Text>
+          </Callout.Root>
+        )}
+        <div className="mt-2 flex justify-end">
+          <Button
+            type="submit"
+            size="lg"
+            loading={isLoadingEditContainerRegistry}
+            disabled={!methods.formState.isValid}
+          >
+            Save
+          </Button>
         </div>
-      </Section>
-    </div>
+      </form>
+    </FormProvider>
   )
 }
diff --git a/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx b/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx
index e06c22651dc..c56983f359d 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx
@@ -450,7 +450,7 @@ export function ClusterNetworkSettings({ organizationId, clusterId }: ClusterNet
         <div className="mt-2 flex flex-col gap-5">
           {isLoading ? (
             <div className="flex justify-center">
-              <LoaderSpinner className="w-4" />
+              <LoaderSpinner className="w-6" />
             </div>
           ) : (
             <>

From 724244c96af86df31cf71e5276e9e0d75ba73d2f Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Thu, 23 Apr 2026 14:21:05 +0200
Subject: [PATCH 2/2] Bring back previous loader size

---
 .../lib/cluster-network-settings/cluster-network-settings.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx b/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx
index c56983f359d..e06c22651dc 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx
@@ -450,7 +450,7 @@ export function ClusterNetworkSettings({ organizationId, clusterId }: ClusterNet
         <div className="mt-2 flex flex-col gap-5">
           {isLoading ? (
             <div className="flex justify-center">
-              <LoaderSpinner className="w-6" />
+              <LoaderSpinner className="w-4" />
             </div>
           ) : (
             <>