fix: infinite load bug in articles list (#3264)

* fix: prevent infinite pagination loop in articles list

The articles list was making hundreds of GraphQL requests due to missing
pagination termination logic. Added hasMoreArticles state flag to track
when all articles have been loaded and prevent further requests.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* add playwright mcp files to gitignore

* update failing test

* test: add tests for infinite pagination prevention

Added comprehensive tests for the hasMoreArticles state flag that
prevents the infinite pagination loop:
- Initial state verification
- canLoadMore guards against loading when no more articles exist
- appendMore correctly sets hasMoreArticles based on result count
- Integration tests demonstrating infinite loop prevention

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* pass limit to api to make explicit

* update tests

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: brainbicycle

.gitignore

@@ -27,6 +27,9 @@ coverage*
 cypress.env.json
 Brewfile.lock.json
 
+# Playwright MCP
+.playwright-mcp/
+
 # Do not ignore
 !.env.example
 !.env.test

src/client/apps/articles_list/components/articles_list.tsx

@@ -32,8 +32,11 @@ interface ArticlesListState {
   isLoading: boolean
   isPublished: boolean
   offset: number
+  hasMoreArticles: boolean
 }
 
+export const ARTICLE_PAGE_LIMIT = 10
+
 export class ArticlesList extends Component<
   ArticlesListProps,
   ArticlesListState
@@ -48,6 +51,7 @@ export class ArticlesList extends Component<
       isLoading: false,
       isPublished: props.published,
       offset: 0,
+      hasMoreArticles: true,
     }
 
     this.debouncedCanLoadMore = debounce(this.canLoadMore, 300)
@@ -59,11 +63,15 @@ export class ArticlesList extends Component<
   }
 
   canLoadMore = () => {
-    const { offset } = this.state
+    const { offset, hasMoreArticles, isLoading } = this.state
     // TODO: remove jQuery
     if ($(".filter-search__input").val()) {
       return
     }
+    // Don't load more if already loading or no more articles exist
+    if (isLoading || !hasMoreArticles) {
+      return
+    }
     this.setState({ isLoading: true, offset: offset + 10 }, this.fetchFeed)
   }
 
@@ -73,14 +81,22 @@ export class ArticlesList extends Component<
 
   setPublished = (isPublished: boolean) => {
     this.setState(
-      { isPublished, offset: 0, isLoading: true, articles: [] },
+      {
+        isPublished,
+        offset: 0,
+        isLoading: true,
+        articles: [],
+        hasMoreArticles: true,
+      },
       this.fetchFeed
     )
   }
 
   appendMore = (results: ArticleData[]) => {
     const articles = this.state.articles.concat(results)
-    this.setState({ articles, isLoading: false })
+    // If we get fewer than 10 results, we've reached the end
+    const hasMoreArticles = results.length >= ARTICLE_PAGE_LIMIT
+    this.setState({ articles, isLoading: false, hasMoreArticles })
   }
 
   fetchFeed = () => {
@@ -89,7 +105,8 @@ export class ArticlesList extends Component<
     const query = ArticlesListQuery(`
       published: ${isPublished},
       offset: ${offset},
-      channel_id: "${channel.id}"
+      channel_id: "${channel.id}",
+      limit: ${ARTICLE_PAGE_LIMIT},
     `)
 
     request
@@ -98,7 +115,9 @@ export class ArticlesList extends Component<
       .send({ query })
       .end((err, res) => {
         if (err) {
-          return new Error(err)
+          console.error("Error fetching articles:", err)
+          this.setState({ isLoading: false })
+          return
         }
         this.appendMore(res.body.data.articles)
       })

src/client/apps/articles_list/components/test/articles_list.test.tsx

@@ -5,7 +5,7 @@ import React from "react"
 import { Provider } from "react-redux"
 import Waypoint from "react-waypoint"
 import configureStore from "redux-mock-store"
-import ArticleList, { ArticlesList } from "../articles_list"
+import ArticleList, { ArticlesList, ARTICLE_PAGE_LIMIT } from "../articles_list"
 import { ArticlesListEmpty } from "../articles_list_empty"
 import { ArticlesListHeader } from "../articles_list_header"
 require("typeahead.js")
@@ -104,6 +104,12 @@ describe("ArticleList", () => {
     ).toContain("Game of Thrones")
   })
 
+  it("initializes with hasMoreArticles set to true", () => {
+    const component = getWrapper()
+    const instance = component.find(ArticlesList).instance() as ArticlesList
+    expect(instance.state.hasMoreArticles).toBe(true)
+  })
+
   it("renders a link to /edit", () => {
     const component = getWrapper()
     expect(
@@ -187,6 +193,28 @@ describe("ArticleList", () => {
 
       expect(instance.fetchFeed).toBeCalled()
     })
+
+    it("does not load more when hasMoreArticles is false", () => {
+      const instance = getWrapper()
+        .find(ArticlesList)
+        .instance() as ArticlesList
+      instance.setState({ hasMoreArticles: false })
+      instance.fetchFeed = jest.fn()
+      instance.canLoadMore()
+
+      expect(instance.fetchFeed).not.toBeCalled()
+    })
+
+    it("does not load more when already loading", () => {
+      const instance = getWrapper()
+        .find(ArticlesList)
+        .instance() as ArticlesList
+      instance.setState({ isLoading: true })
+      instance.fetchFeed = jest.fn()
+      instance.canLoadMore()
+
+      expect(instance.fetchFeed).not.toBeCalled()
+    })
   })
 
   describe("#setResults", () => {
@@ -216,6 +244,7 @@ describe("ArticleList", () => {
           articles: [],
           isLoading: true,
           isPublished: false,
+          hasMoreArticles: true,
           offset: 0,
         },
         instance.fetchFeed
@@ -243,6 +272,38 @@ describe("ArticleList", () => {
       // @ts-ignore
       expect(instance.setState.mock.calls[0][0].articles.length).toBe(6)
     })
+
+    it("sets hasMoreArticles to true when ARTICLE_PAGE_LIMIT or more articles returned", () => {
+      const instance = getWrapper()
+        .find(ArticlesList)
+        .instance() as ArticlesList
+      instance.setState = jest.fn()
+      const tenArticles = Array(ARTICLE_PAGE_LIMIT).fill(props.articles[0])
+      instance.appendMore(tenArticles as ArticleData[])
+      // @ts-ignore
+      expect(instance.setState.mock.calls[0][0].hasMoreArticles).toBe(true)
+    })
+
+    it("sets hasMoreArticles to false when fewer than ARTICLE_PAGE_LIMIT articles returned", () => {
+      const instance = getWrapper()
+        .find(ArticlesList)
+        .instance() as ArticlesList
+      instance.setState = jest.fn()
+      const fewArticles = [props.articles[0], props.articles[1]]
+      instance.appendMore(fewArticles as ArticleData[])
+      // @ts-ignore
+      expect(instance.setState.mock.calls[0][0].hasMoreArticles).toBe(false)
+    })
+
+    it("sets hasMoreArticles to false when no articles returned", () => {
+      const instance = getWrapper()
+        .find(ArticlesList)
+        .instance() as ArticlesList
+      instance.setState = jest.fn()
+      instance.appendMore([])
+      // @ts-ignore
+      expect(instance.setState.mock.calls[0][0].hasMoreArticles).toBe(false)
+    })
   })
 
   describe("#fetchFeed", () => {
@@ -269,7 +330,8 @@ describe("ArticleList", () => {
       articles(
       published: true,
       offset: 0,
-      channel_id: \"test-channel\"
+      channel_id: \"test-channel\",
+      limit: 10,
     ){
         thumbnail_image
         thumbnail_title
@@ -301,7 +363,8 @@ describe("ArticleList", () => {
       articles(
       published: false,
       offset: 0,
-      channel_id: \"test-channel\"
+      channel_id: \"test-channel\",
+      limit: 10,
     ){
         thumbnail_image
         thumbnail_title
@@ -361,4 +424,45 @@ describe("ArticleList", () => {
       expect(instance.appendMore).toBeCalledWith(articles)
     })
   })
+
+  describe("infinite pagination prevention", () => {
+    it("prevents multiple fetchFeed calls when no more articles exist", () => {
+      const instance = getWrapper()
+        .find(ArticlesList)
+        .instance() as ArticlesList
+      const fetchFeedSpy = jest.fn()
+      instance.fetchFeed = fetchFeedSpy
+
+      // Simulate reaching end of articles
+      instance.setState({ hasMoreArticles: false })
+
+      // Try to load more multiple times
+      instance.canLoadMore()
+      instance.canLoadMore()
+      instance.canLoadMore()
+
+      // fetchFeed should never be called
+      expect(fetchFeedSpy).not.toBeCalled()
+    })
+
+    it("stops loading more when API returns fewer than ARTICLE_PAGE_LIMIT articles", () => {
+      const instance = getWrapper()
+        .find(ArticlesList)
+        .instance() as ArticlesList
+
+      // Simulate API returning only 3 articles (fewer than ARTICLE_PAGE_LIMIT)
+      const fewArticles = articles.slice(0, 3)
+      instance.appendMore(fewArticles as ArticleData[])
+
+      // hasMoreArticles should be false
+      expect(instance.state.hasMoreArticles).toBe(false)
+
+      // Attempting to load more should not fetch
+      const fetchFeedSpy = jest.fn()
+      instance.fetchFeed = fetchFeedSpy
+      instance.canLoadMore()
+
+      expect(fetchFeedSpy).not.toBeCalled()
+    })
+  })
 })