From 3b47aa960592cbda0c14db201c48fb599d546e67 Mon Sep 17 00:00:00 2001
From: Admin <admin@localhost>
Date: Sun, 12 Jul 2026 18:37:04 +0330
Subject: [PATCH] improvement: clinic/lab search button removed. search now
 happens on debounce.

---
 .../(dashboard)/organizations/page.tsx        | 67 ++++++++++---------
 1 file changed, 36 insertions(+), 31 deletions(-)

diff --git a/frontend/src/app/[locale]/(dashboard)/organizations/page.tsx b/frontend/src/app/[locale]/(dashboard)/organizations/page.tsx
index 65230c9..b61de88 100644
--- a/frontend/src/app/[locale]/(dashboard)/organizations/page.tsx
+++ b/frontend/src/app/[locale]/(dashboard)/organizations/page.tsx
@@ -48,6 +48,7 @@ export default function OrganizationsPage() {
   const { currentOrganization } = useAuth();
   const [loading, setLoading] = useState(true);
   const toast = useToast();
+  const { showError, setError: setToastError } = toast;
 
   const formatApiMessage = useCallback(
     (err: unknown): string => getUserFacingError(err, tErrors, tCommon('errorGeneric')),
@@ -122,29 +123,44 @@ export default function OrganizationsPage() {
     void loadList();
   }, []);
 
-  async function runSearch() {
+  useEffect(() => {
+    let cancelled = false;
     const q = query.trim();
+
     if (!q) {
       setMode('existing');
       setSearchResults([]);
       setShowInviteForm(false);
+      setSearching(false);
       return;
     }
 
-    setSearching(true);
-    toast.setError('');
     setMode('search');
     setShowInviteForm(false);
-    try {
-      const res = await organizationApi.search(q);
-      setSearchResults(res.data);
-    } catch (e) {
-      toast.showError(formatApiMessage(e));
-      setSearchResults([]);
-    } finally {
-      setSearching(false);
-    }
-  }
+    setSearching(true);
+
+    const timeout = setTimeout(() => {
+      void (async () => {
+        setToastError('');
+        try {
+          const res = await organizationApi.search(q);
+          if (cancelled) return;
+          setSearchResults(res.data);
+        } catch (e) {
+          if (cancelled) return;
+          showError(formatApiMessage(e));
+          setSearchResults([]);
+        } finally {
+          if (!cancelled) setSearching(false);
+        }
+      })();
+    }, 300);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timeout);
+    };
+  }, [query, formatApiMessage, showError, setToastError]);
 
   async function submitConnectionRequest(targetOrganizationId: string) {
     setPendingConnectionRowId(targetOrganizationId);
@@ -315,33 +331,22 @@ export default function OrganizationsPage() {
       <SearchBar
         value={query}
         onChange={setQuery}
-        onSubmit={() => void runSearch()}
         placeholder={t('searchPlaceholder', { counterpart: counterpart.toLowerCase() })}
         actions={
-          <>
+          query.trim() ? (
             <button
               type="button"
-              onClick={() => void runSearch()}
-              disabled={searching}
-              className="px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium border bg-primary-soft text-primary border-primary/50 disabled:opacity-60"
+              onClick={clearSearchView}
+              className="px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium border text-text-secondary border-border/40 hover:bg-background-card/70 hover:border-border"
             >
-              {tCommon('search')}
+              {t('backToList')}
             </button>
-            {mode === 'search' && (
-              <button
-                type="button"
-                onClick={clearSearchView}
-                className="px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium border text-text-secondary border-border/40 hover:bg-background-card/70 hover:border-border"
-              >
-                {t('backToList')}
-              </button>
-            )}
-          </>
+          ) : undefined
         }
       />
 
       <OrganizationConnectionsMobileList
-        loading={loading}
+        loading={loading || searching}
         mode={mode}
         existingRows={existingRows}
         searchResults={searchResults}
@@ -409,7 +414,7 @@ export default function OrganizationsPage() {
         }
         body={
           <>
-            {loading ? (
+            {loading || (mode === 'search' && searching) ? (
               <tr>
                 <td colSpan={5} className="px-6 py-8 text-sm text-text-secondary">
                   {tCommon('loadingEllipsis')}