add scroll agent fetch loading

package.json

@@ -56,6 +56,7 @@
     "react": "^18.2.0",
     "react-activity-calendar": "^2.7.1",
     "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.15.1",
     "react-markdown": "^9.0.1",
     "react-player": "^2.16.0",
     "recharts": "^2.13.3",

src/components/layout/AgentsContent.tsx

@@ -1,6 +1,10 @@
 'use client';
 
 import { useAllAssistants } from '@/hooks/useAssistants';
+import { Skeleton } from '../ui/skeleton';
+import { useState, useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { useSearchParams } from 'next/navigation';
 import dynamic from 'next/dynamic';
 import PageLoaderSkeleton from './PageLoaderSkeleton';
 
@@ -10,11 +14,29 @@ const AllAgentsWithNoSSR = dynamic(
 );
 
 const AgentContent = () => {
-  const { allAgents: data, loading } = useAllAssistants();
+  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  const searchParams = useSearchParams();
+  const isPlayground = searchParams.get('isPlayground') === 'true';
+  const { allAgents: data, loading } = useAllAssistants(offset, 30);
+  const { ref, inView } = useInView();
 
-  if (loading) {
-    return <PageLoaderSkeleton />;
-  }
+  useEffect(() => {
+    if (inView && !loading && hasMore) {
+      setOffset((prevOffset) => prevOffset + 30);
+    }
+  }, [inView, loading, hasMore]);
+
+  useEffect(() => {
+    if (data) {
+      const totalAgents = isPlayground
+        ? data.unverifiedAgents.length
+        : data.agents.length;
+      if (totalAgents < 30) {
+        setHasMore(false);
+      }
+    }
+  }, [data, isPlayground]);
 
   return (
     <div className='relative z-30'>
@@ -23,6 +45,8 @@ const AgentContent = () => {
         filters={data?.filters || []}
         unverifiedAgents={data?.unverifiedAgents || []}
       />
+      {loading && <PageLoaderSkeleton />}
+      <div ref={ref} />
     </div>
   );
 };

src/hooks/useAssistants.ts

@@ -104,7 +104,7 @@ export const useVerifiedAssistants = () => {
   return { verifiedAgents: data, loading, error };
 };
 
-export const useAllAssistants = () => {
+export const useAllAssistants = (offset?: number, limit?: number) => {
   const [data, setData] = useState<AgentData | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<Error | null>(null);
@@ -113,7 +113,7 @@ export const useAllAssistants = () => {
     const fetchUnverifiedAssistants = async () => {
       try {
         const response = await fetch(
-          `${MB_URL.REGISTRY_API_BASE}/agents?verifiedOnly=false&limit=100`
+          `${MB_URL.REGISTRY_API_BASE}/agents?verifiedOnly=false&limit=${limit ? limit : 100}&offset=${offset ? offset : 0}`
         );
         if (!response.ok) {
           throw new Error('Failed to fetch unverified agents');
@@ -140,16 +140,19 @@ export const useAllAssistants = () => {
           ),
         ].filter(Boolean);
 
-        setData({
-          agents: verifiedAgents,
-          unverifiedAgents: unverifiedAgents,
+        setData((prevData) => ({
+          agents: [...(prevData?.agents || []), ...verifiedAgents],
+          unverifiedAgents: [
+            ...(prevData?.unverifiedAgents || []),
+            ...unverifiedAgents,
+          ],
           filters: [
             {
               label: 'Category',
               values: categories as string[],
             },
           ],
-        });
+        }));
       } catch (err) {
         setError(err as Error);
       } finally {
@@ -158,7 +161,7 @@ export const useAllAssistants = () => {
     };
 
     fetchUnverifiedAssistants();
-  }, []);
+  }, [offset, limit]);
 
   return { allAgents: data, loading, error };
 };