feat: add debounced search for pool filtering on Explore page

src/app/explorePools/page.tsx

@@ -1,5 +1,6 @@
 // src/app/explorePools/page.tsx
 "use client";
+import { useDebouncedValue } from "@/hooks/useDebouncedValue";
 import React, { useEffect, useState, useCallback, useMemo } from "react";
 import { useAccount, useWalletClient, useChainId } from "wagmi";
 import { PredictionPoolFactoryABI } from "@/utils/abi/PredictionPoolFactory";
@@ -50,6 +51,7 @@ function ExploreFatePoolsClient() {
   const [pools, setPools] = useState<Pool[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [searchQuery, setSearchQuery] = useState<string>("");
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 300);
   const [isCreatingPool, setIsCreatingPool] = useState<boolean>(false);
   const [chainStates, setChainStates] = useState<ChainLoadingState[]>([]);
   const [refreshing, setRefreshing] = useState<boolean>(false);
@@ -561,7 +563,7 @@ function ExploreFatePoolsClient() {
   const filteredPools = useMemo(
     (): Pool[] =>
       pools.filter((pool: Pool) => {
-        const searchLower = searchQuery.toLowerCase();
+        const searchLower = debouncedSearchQuery.toLowerCase();
         const priceFeedName = getPriceFeedName(pool.priceFeedAddress, pool.chainId);
         return (
           pool.name.toLowerCase().includes(searchLower) ||
@@ -571,7 +573,7 @@ function ExploreFatePoolsClient() {
           priceFeedName.toLowerCase().includes(searchLower)
         );
       }),
-    [pools, searchQuery]
+    [pools, debouncedSearchQuery]
   );
 
   const groupedPools = useMemo((): Record<number, Pool[]> => {

src/hooks/useDebouncedValue.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Returns a debounced version of the provided value.
+ * The returned value only updates after the specified delay
+ * has elapsed since the last change, preventing excessive
+ * re-renders and computations (e.g. filtering large lists).
+ *
+ * @param value - The value to debounce.
+ * @param delay - Debounce delay in milliseconds (default: 300ms).
+ * @returns The debounced value.
+ */
+export function useDebouncedValue<T>(value: T, delay: number = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}