feat: Implement infinite scroll for agent grids and enhance performance

- Added `useInfiniteScroll` hook to manage infinite scrolling behavior in agent grids.
- Integrated infinite scroll functionality into `AgentGrid` and `VirtualizedAgentGrid` components.
- Updated `AgentMarketplace` to pass the scroll container to the agent grid components.
- Refactored loading indicators to show a spinner instead of a "Load More" button.
- Created `VirtualizedAgentGrid` component for optimized rendering of agent cards using virtualization.
- Added performance tests for `VirtualizedAgentGrid` to ensure efficient handling of large datasets.
- Updated translations to include new messages for end-of-results scenarios.

client/src/hooks/useInfiniteScroll.ts

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { throttle } from 'lodash';
+
+interface UseInfiniteScrollOptions {
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+  fetchNextPage: () => void;
+  threshold?: number; // Percentage of scroll position to trigger fetch (0-1)
+  throttleMs?: number; // Throttle delay in milliseconds
+}
+
+/**
+ * Custom hook for implementing infinite scroll functionality
+ * Detects when user scrolls near the bottom and triggers data fetching
+ */
+export const useInfiniteScroll = ({
+  hasNextPage = false,
+  isFetchingNextPage = false,
+  fetchNextPage,
+  threshold = 0.8, // Trigger when 80% scrolled
+  throttleMs = 200,
+}: UseInfiniteScrollOptions) => {
+  const scrollElementRef = useRef<HTMLElement | null>(null);
+
+  // Throttled scroll handler to prevent excessive API calls
+  const handleScroll = useCallback(
+    throttle(() => {
+      const element = scrollElementRef.current;
+      if (!element) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = element;
+
+      // Calculate scroll position as percentage
+      const scrollPosition = (scrollTop + clientHeight) / scrollHeight;
+
+      // Check if we've scrolled past the threshold and conditions are met
+      const shouldFetch = scrollPosition >= threshold && hasNextPage && !isFetchingNextPage;
+
+      if (shouldFetch) {
+        fetchNextPage();
+      }
+    }, throttleMs),
+    [hasNextPage, isFetchingNextPage, fetchNextPage, threshold, throttleMs],
+  );
+
+  // Set up scroll listener
+  useEffect(() => {
+    const element = scrollElementRef.current;
+    if (!element) return;
+
+    // Remove any existing listener first
+    element.removeEventListener('scroll', handleScroll);
+
+    // Add the new listener
+    element.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      element.removeEventListener('scroll', handleScroll);
+      // Clean up throttled function
+      handleScroll.cancel?.();
+    };
+  }, [handleScroll]);
+
+  // Additional effect to re-setup listeners when scroll element changes
+  useEffect(() => {
+    const element = scrollElementRef.current;
+    if (!element) return;
+    // Remove any existing listener first
+    element.removeEventListener('scroll', handleScroll);
+
+    // Add the new listener
+    element.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      element.removeEventListener('scroll', handleScroll);
+      // Clean up throttled function
+      handleScroll.cancel?.();
+    };
+  }, [scrollElementRef.current, handleScroll]);
+
+  // Function to manually set the scroll container
+  const setScrollElement = useCallback((element: HTMLElement | null) => {
+    scrollElementRef.current = element;
+  }, []);
+
+  return {
+    setScrollElement,
+    scrollElementRef,
+  };
+};
+
+export default useInfiniteScroll;