From 6c2037e013f58bcd5b46dc64ae70cec6afdbd35d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Mon, 11 May 2026 16:26:27 +0400
Subject: [PATCH] Debounce vendor search query with usehooks-ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Émile Ré <emile@getprobo.com>
---
 .../vendors/dialogs/CreateVendorDialog.tsx     | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/console/src/pages/organizations/vendors/dialogs/CreateVendorDialog.tsx b/apps/console/src/pages/organizations/vendors/dialogs/CreateVendorDialog.tsx
index 768eb1a95..93c6f1239 100644
--- a/apps/console/src/pages/organizations/vendors/dialogs/CreateVendorDialog.tsx
+++ b/apps/console/src/pages/organizations/vendors/dialogs/CreateVendorDialog.tsx
@@ -22,9 +22,10 @@ import {
   IconPlusLarge,
   useDialogRef,
 } from "@probo/ui";
-import { type ReactNode, Suspense, useState } from "react";
+import { type ReactNode, Suspense, useEffect, useRef, useState, useCallback } from "react";
 import { useQueryLoader } from "react-relay";
 import { graphql, readInlineData } from "relay-runtime";
+import { useDebounceCallback } from "usehooks-ts";
 
 import type { CommonThirdPartyComboboxQuery } from "#/__generated__/core/CommonThirdPartyComboboxQuery.graphql";
 import type { CreateVendorDialog_commonThirdParty$key } from "#/__generated__/core/CreateVendorDialog_commonThirdParty.graphql";
@@ -115,10 +116,21 @@ export function CreateVendorDialog({
     });
   };
 
+  const debouncedLoadQuery = useDebounceCallback(
+    useCallback(
+      (name: string) => {
+        loadQuery({ name });
+      },
+      [loadQuery],
+    ),
+    500,
+  );
+
   const handleSearch = (name: string) => {
     setSearchQuery(name);
-    if (name.trim().length >= 2) {
-      loadQuery({ name: name.trim() });
+    const trimmed = name.trim();
+    if (trimmed.length >= 2) {
+      debouncedLoadQuery(trimmed);
     }
   };