From 56088ca6c05973fa82ea6f51e7b7f9f333400054 Mon Sep 17 00:00:00 2001
From: Ahmed Darrazi <ahmeddarrazi@MacBookPro.fritz.box>
Date: Sun, 7 Dec 2025 22:59:07 +0100
Subject: [PATCH] fix: Resolve search infinite loop issue

Fixed useEffect dependency problem in SearchInput that caused
infinite re-renders when searching with 2+ characters.

Changes:
- Removed onSearch from useEffect dependencies
- Added ESLint disable comment for exhaustive-deps
- Search now only triggers on debouncedQuery changes

Issue: Search spinner would hang indefinitely when typing 2 chars
Root cause: onSearch callback recreated on every render, causing loop
Solution: Only depend on debouncedQuery in useEffect
---
 components/policy-explorer/PolicySearchContainer.tsx | 1 +
 components/search/SearchInput.tsx                    | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/policy-explorer/PolicySearchContainer.tsx b/components/policy-explorer/PolicySearchContainer.tsx
index e6e18ad..ec828d4 100644
--- a/components/policy-explorer/PolicySearchContainer.tsx
+++ b/components/policy-explorer/PolicySearchContainer.tsx
@@ -32,6 +32,7 @@ export function PolicySearchContainer({
       return;
     }
 
+    // Only search with 2 or more characters
     if (query.length < 2) {
       return;
     }
diff --git a/components/search/SearchInput.tsx b/components/search/SearchInput.tsx
index b80ac38..4ac85b3 100644
--- a/components/search/SearchInput.tsx
+++ b/components/search/SearchInput.tsx
@@ -2,7 +2,7 @@
 
 import { Input } from '@/components/ui/input';
 import { Search, Loader2 } from 'lucide-react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useDebounce } from 'use-debounce';
 
 interface SearchInputProps {
@@ -22,7 +22,8 @@ export function SearchInput({ onSearch, isSearching = false }: SearchInputProps)
     if (debouncedQuery.length >= 2 || debouncedQuery.length === 0) {
       onSearch(debouncedQuery);
     }
-  }, [debouncedQuery, onSearch]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedQuery]); // Only depend on debouncedQuery, not onSearch
 
   return (
     <div className="relative w-full max-w-2xl">