From f22eb861966ed24ee3f7e748b2fdb6b309e0d48b Mon Sep 17 00:00:00 2001
From: Jonathan <contact@grafikart.fr>
Date: Wed, 11 Jun 2025 17:57:26 +0200
Subject: [PATCH] Fix layout shift on controls search

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
---
 .../controls/LinkedControlsDialog.tsx          | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/console2/src/components/controls/LinkedControlsDialog.tsx b/apps/console2/src/components/controls/LinkedControlsDialog.tsx
index b67d1740f..e6be243c5 100644
--- a/apps/console2/src/components/controls/LinkedControlsDialog.tsx
+++ b/apps/console2/src/components/controls/LinkedControlsDialog.tsx
@@ -14,6 +14,7 @@ import {
   Suspense,
   useMemo,
   useRef,
+  useState,
   type ReactNode,
   type RefObject,
 } from "react";
@@ -82,7 +83,10 @@ type SearchRef = RefObject<{ search: (v: string) => void } | null>;
 export function LinkedControlsDialog(props: Props) {
   const { __ } = useTranslate();
   const searchRef: SearchRef = useRef(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [minHeight, setMinHeight] = useState(0);
   const onSearch = (v: string) => {
+    setMinHeight(contentRef.current?.clientHeight ?? 0);
     searchRef.current?.search(v);
   };
   return (
@@ -95,9 +99,17 @@ export function LinkedControlsDialog(props: Props) {
             onValueChange={onSearch}
           />
         </div>
-        <Suspense fallback={<Spinner centered />}>
-          <LinkedControlsDialogContent {...props} ref={searchRef} />
-        </Suspense>
+        <div ref={contentRef}>
+          <Suspense
+            fallback={
+              <div style={{ minHeight }}>
+                <Spinner centered />
+              </div>
+            }
+          >
+            <LinkedControlsDialogContent {...props} ref={searchRef} />
+          </Suspense>
+        </div>
       </DialogContent>
     </Dialog>
   );