fix(feed): keep sorted pagination advancing

src/components/VideoFeed.test.tsx

@@ -13,6 +13,7 @@ const {
   mockSetVideosForFullscreen,
   mockUpdateVideos,
   mockUseVideoPrefetch,
+  mockInfiniteScroll,
   mockTrackEvent,
 } = vi.hoisted(() => ({
   mockTrackEvent: vi.fn(),
@@ -22,6 +23,7 @@ const {
   mockSetVideosForFullscreen: vi.fn(),
   mockUpdateVideos: vi.fn(),
   mockUseVideoPrefetch: vi.fn(),
+  mockInfiniteScroll: vi.fn(),
 }));
 
 vi.mock('@/hooks/useVideoProvider', () => ({
@@ -111,7 +113,10 @@ vi.mock('@/components/ui/card', () => ({
 }));
 
 vi.mock('react-infinite-scroll-component', () => ({
-  default: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  default: ({ children, dataLength }: { children: ReactNode; dataLength: number }) => {
+    mockInfiniteScroll({ dataLength });
+    return <div>{children}</div>;
+  },
 }));
 
 describe('VideoFeed', () => {
@@ -143,6 +148,7 @@ describe('VideoFeed', () => {
       isLoading: false,
       error: null,
       refetch: vi.fn(),
+      fetchedCount: 1,
       dataSource: 'funnelcake',
     });
   });
@@ -205,6 +211,7 @@ describe('VideoFeed', () => {
       isLoading: false,
       error: null,
       refetch: vi.fn(),
+      fetchedCount: 1,
       dataSource: 'funnelcake',
     });
 
@@ -227,6 +234,7 @@ describe('VideoFeed', () => {
       isLoading: false,
       error: null,
       refetch: vi.fn(),
+      fetchedCount: 3,
       dataSource: 'funnelcake',
     });
 
@@ -252,4 +260,45 @@ describe('VideoFeed', () => {
       { prefetchVideos: false },
     );
   });
+
+  it('keys infinite scroll from fetched count instead of filtered rendered count', () => {
+    mockUseVideoProvider.mockReturnValue({
+      data: {
+        pages: [{
+          videos: [
+            {
+              id: 'video-1',
+              pubkey: 'a'.repeat(64),
+              kind: 34236,
+              vineId: 'same-address',
+              videoUrl: 'https://example.com/video-1.mp4',
+            },
+            {
+              id: 'video-2',
+              pubkey: 'a'.repeat(64),
+              kind: 34236,
+              vineId: 'same-address',
+              videoUrl: 'https://example.com/video-2.mp4',
+            },
+          ],
+        }],
+      },
+      fetchNextPage: vi.fn(),
+      hasNextPage: true,
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+      fetchedCount: 2,
+      dataSource: 'funnelcake',
+    });
+
+    render(
+      <MemoryRouter initialEntries={['/discovery']}>
+        <VideoFeed feedType="discovery" />
+      </MemoryRouter>
+    );
+
+    expect(screen.getAllByTestId('video-card')).toHaveLength(1);
+    expect(mockInfiniteScroll).toHaveBeenCalledWith({ dataLength: 2 });
+  });
 });

src/components/VideoFeed.tsx

@@ -98,6 +98,7 @@ export function VideoFeed({
     isLoading,
     error,
     refetch,
+    fetchedCount,
     dataSource,
   } = useVideoProvider({
     feedType,
@@ -478,7 +479,7 @@ export function VideoFeed({
       >
         {compilationLauncher}
         <InfiniteScroll
-          dataLength={filteredVideos.length}
+          dataLength={fetchedCount}
           next={fetchNextPage}
           hasMore={hasNextPage ?? false}
           loader={
@@ -532,7 +533,7 @@ export function VideoFeed({
     >
       {compilationLauncher}
       <InfiniteScroll
-        dataLength={filteredVideos.length}
+        dataLength={fetchedCount}
         next={fetchNextPage}
         hasMore={hasNextPage ?? false}
         loader={

src/hooks/useInfiniteSearchVideos.ts

@@ -93,7 +93,7 @@ export function useInfiniteSearchVideos({
   const debounceMs = isTest ? 0 : 300;
   const debouncedQuery = useDebouncedValue(query, debounceMs);
 
-  return useInfiniteQuery<VideoPage, Error>({
+  const queryResult = useInfiniteQuery<VideoPage, Error>({
     queryKey: ['infinite-search-videos', debouncedQuery, searchType, sortMode, pageSize],
     queryFn: async ({ pageParam, signal }) => {
       if (!debouncedQuery.trim()) {
@@ -311,4 +311,11 @@ export function useInfiniteSearchVideos({
     staleTime: 60_000,
     gcTime: 300_000,
   });
+
+  const fetchedCount = queryResult.data?.pages.reduce((sum, page) => sum + page.videos.length, 0) ?? 0;
+
+  return {
+    ...queryResult,
+    fetchedCount,
+  };
 }