From 5f30c63bed79b7318e1a60c03ee342fee28bc08b Mon Sep 17 00:00:00 2001
From: Marc-Roig <marc12info@gmail.com>
Date: Mon, 27 Jan 2025 10:58:08 +0100
Subject: [PATCH] chore: useDebounce hook

---
 .../components/FormInputs/Relations.tsx       | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Relations.tsx b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Relations.tsx
index 6c18bc1b28..6dbce3b5b7 100644
--- a/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Relations.tsx
+++ b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Relations.tsx
@@ -36,6 +36,7 @@ import { styled } from 'styled-components';
 import { RelationDragPreviewProps } from '../../../../components/DragPreviews/RelationDragPreview';
 import { COLLECTION_TYPES } from '../../../../constants/collections';
 import { ItemTypes } from '../../../../constants/dragAndDrop';
+import { useDebounce } from '../../../../hooks/useDebounce';
 import { useDoc } from '../../../../hooks/useDocument';
 import { type EditFieldLayout } from '../../../../hooks/useDocumentLayout';
 import {
@@ -461,6 +462,7 @@ const RelationsInput = ({
   const fieldRef = useFocusInputField<HTMLInputElement>(name);
   const field = useField<RelationsFormValue>(name);
 
+  const searchParamsDebounced = useDebounce(searchParams, 300);
   const [searchForTrigger, { data, isLoading }] = useLazySearchRelationsQuery();
 
   /**
@@ -478,22 +480,18 @@ const RelationsInput = ({
      */
     const [targetField] = name.split('.').slice(-1);
 
-    const timeout = setTimeout(() => {
-      searchForTrigger({
-        model,
-        targetField,
-        params: {
-          ...buildValidParams(query),
-          id: id ?? '',
-          pageSize: 10,
-          idsToInclude: field.value?.disconnect?.map((rel) => rel.id.toString()) ?? [],
-          idsToOmit: field.value?.connect?.map((rel) => rel.id.toString()) ?? [],
-          ...searchParams,
-        },
-      });
-    }, 300);
-
-    return () => clearTimeout(timeout);
+    searchForTrigger({
+      model,
+      targetField,
+      params: {
+        ...buildValidParams(query),
+        id: id ?? '',
+        pageSize: 10,
+        idsToInclude: field.value?.disconnect?.map((rel) => rel.id.toString()) ?? [],
+        idsToOmit: field.value?.connect?.map((rel) => rel.id.toString()) ?? [],
+        ...searchParamsDebounced,
+      },
+    });
   }, [
     field.value?.connect,
     field.value?.disconnect,
@@ -502,7 +500,7 @@ const RelationsInput = ({
     name,
     query,
     searchForTrigger,
-    searchParams,
+    searchParamsDebounced,
   ]);
 
   const handleSearch = async (search: string) => {