Skip to content

feat: add responsive feed pagination defaults - #830

Merged
tomcasaburi merged 5 commits into
masterfrom
codex/feature/paginated-feed-default
Jul 23, 2026
Merged

feat: add responsive feed pagination defaults#830
tomcasaburi merged 5 commits into
masterfrom
codex/feature/paginated-feed-default

Conversation

@tomcasaburi

@tomcasaburi tomcasaburi commented Jul 23, 2026

Copy link
Copy Markdown
Member

Summary

  • default desktop feeds to 25-post manual pages with a Load more button
  • keep infinite scrolling enabled by default on mobile and preserve Virtuoso virtualization in both modes
  • add a persisted content option, translations, and targeted pagination tests

Verification

  • yarn test (174 tests)
  • yarn lint
  • yarn type-check
  • yarn knip
  • yarn build
  • yarn exec react-doctor . --verbose --scope changed -y
  • Chrome, Firefox, and WebKit at desktop and mobile widths
  • throttled Chromium feed smoke test

Note

Medium Risk
Touches pagination across all main feed views and Virtuoso scroll behavior; regressions could cause double loads or stuck loading states, though tests cover key paths.

Overview
Adds responsive feed pagination: desktop defaults to 25-post pages with a Load more button; mobile keeps infinite scroll via Virtuoso endReached unless the user overrides it.

A new Feeds section in content options persists an Enable infinite feed preference (null = device default). useInfiniteFeedEnabled resolves that policy; FeedPagination shows the button only when infinite mode is off, blocks duplicate loads while a page fetch is in flight, and footer loading text is gated by shouldShowFeedLoading.

Feed views (home, all, mod, domain, community) pass FEED_POSTS_PER_PAGE, wire onLoadMore (including Promise.all for combined weekly/monthly/yearly loads), and disable scroll-triggered loading when manual pagination is active. Locale files add load_more, enable_infinite_feed, and feeds strings.

Reviewed by Cursor Bugbot for commit 1a27f67. Bugbot is set up for automated code reviews on this repo. Configure here.

Summary by CodeRabbit

  • New Features

    • Added an option to enable infinite feed scrolling, with device-appropriate defaults.
    • Added “Load more” pagination when infinite scrolling is disabled.
    • Added loading indicators and improved pagination behavior across feed views.
    • Added localized labels for feed settings and pagination in supported languages.
  • Bug Fixes

    • Prevented duplicate load requests while pagination is in progress.

@vercel

vercel Bot commented Jul 23, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
seedit Ready Ready Preview, Comment Jul 23, 2026 12:23pm

Request Review

@coderabbitai

coderabbitai Bot commented Jul 23, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

Adds a configurable infinite-feed preference with mobile fallback, manual “load more” pagination, conditional Virtuoso loading across feed views, footer loading states, settings controls, tests, styles, and translations.

Changes

Infinite feed pagination

Layer / File(s) Summary
Preference and pagination configuration
src/stores/use-content-options-store.ts, src/hooks/use-feed-pagination.ts, src/views/settings/content-options/content-options.tsx, src/**/test.ts
Adds persisted infiniteFeedEnabled state, a mobile-aware resolver, and a feeds settings checkbox with coverage for resolution and persistence.
Footer pagination UI
src/components/feed-footer/*
Adds FeedPagination, loading-state rules, guarded asynchronous loading, footer integration, responsive styling, translations lookup, and component tests.
Feed view loading integration
src/views/all/all.tsx, src/views/community/community.tsx, src/views/domain/domain.tsx, src/views/home/home.tsx, src/views/mod/mod.tsx
Uses a shared page size, awaits combined load-more operations, passes callbacks to footers, and enables Virtuoso endReached only when infinite feed is enabled.
Feed pagination translations
public/translations/*/default.json
Adds load_more, enable_infinite_feed, and feeds entries across the default locale catalogs while retaining dismiss.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Settings
  participant ContentOptionsStore
  participant FeedView
  participant Virtuoso
  participant FeedFooter
  participant FeedPagination
  participant LoadMore
  Settings->>ContentOptionsStore: setInfiniteFeedEnabled(enabled)
  ContentOptionsStore-->>FeedView: persisted preference
  FeedView->>FeedView: resolve pagination mode
  alt Infinite feed enabled
    Virtuoso->>LoadMore: endReached
  else Manual pagination
    FeedView->>FeedFooter: pass onLoadMore
    FeedFooter->>FeedPagination: render load-more control
    FeedPagination->>LoadMore: invoke on click
  end
Loading
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main change: responsive feed pagination defaults.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch codex/feature/paginated-feed-default

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Comment thread src/components/feed-footer/feed-footer.tsx
@tomcasaburi

Copy link
Copy Markdown
Member Author

Addressed Cursor Bugbot's valid loading-state finding in ef34045.\n\nThe manual desktop mode now keeps the loading footer visible while the first page is empty and fetching, then hides it once the 25-post page can expose the Load more control. Added focused regression coverage.\n\nVerified: 176 tests, lint, type-check, build, knip, React Doctor changed scope, desktop/mobile behavior in Chrome/Firefox/WebKit, plus a mid-throttled Chromium first-load pass.

Comment thread src/components/feed-footer/feed-pagination.tsx Outdated
Comment thread src/components/feed-footer/feed-footer-utils.ts Outdated
Comment thread src/views/community/community.tsx Outdated

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 6368ca7. Configure here.

Comment thread src/components/feed-footer/feed-footer-utils.ts Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
src/components/feed-footer/feed-footer-utils.test.ts (1)

47-56: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Add exhausted-feed regression coverage.

These tests do not cover hasMore: false, so they pass despite the helper rendering a permanent loading state after the final page. Add manual and infinite exhausted cases expecting false, then run yarn test.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/feed-footer/feed-footer-utils.test.ts` around lines 47 - 56,
Add regression tests in the shouldShowFeedLoading suite for exhausted feeds with
hasMore: false, covering both manual pagination (infiniteFeedEnabled: false) and
infinite-feed mode (infiniteFeedEnabled: true), and expect false in each case.
Run yarn test after updating the tests.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/feed-footer/feed-footer-utils.ts`:
- Around line 29-36: Update shouldShowFeedLoading so an exhausted feed never
reports loading: remove the !hasMore condition and require an actual loading
state based on feedLength and infiniteFeedEnabled, preserving the existing
behavior for initial and active infinite-feed loading.

In `@src/views/community/community.tsx`:
- Around line 197-199: Update the FeedPagination rendering in the community view
so the manual pagination control is mounted only when isOnline is true,
preventing offline clicks from invoking loadMore. Preserve the existing hasMore
and infiniteFeedEnabled conditions, and add a regression test covering a loaded
page with hasMore while offline.

---

Nitpick comments:
In `@src/components/feed-footer/feed-footer-utils.test.ts`:
- Around line 47-56: Add regression tests in the shouldShowFeedLoading suite for
exhausted feeds with hasMore: false, covering both manual pagination
(infiniteFeedEnabled: false) and infinite-feed mode (infiniteFeedEnabled: true),
and expect false in each case. Run yarn test after updating the tests.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 843f9a2b-097b-4795-aea5-2cc22e53cc72

📥 Commits

Reviewing files that changed from the base of the PR and between 8cf73d7 and 6368ca7.

📒 Files selected for processing (51)
  • public/translations/ar/default.json
  • public/translations/bn/default.json
  • public/translations/cs/default.json
  • public/translations/da/default.json
  • public/translations/de/default.json
  • public/translations/el/default.json
  • public/translations/en/default.json
  • public/translations/es/default.json
  • public/translations/fa/default.json
  • public/translations/fi/default.json
  • public/translations/fil/default.json
  • public/translations/fr/default.json
  • public/translations/he/default.json
  • public/translations/hi/default.json
  • public/translations/hu/default.json
  • public/translations/id/default.json
  • public/translations/it/default.json
  • public/translations/ja/default.json
  • public/translations/ko/default.json
  • public/translations/mr/default.json
  • public/translations/nl/default.json
  • public/translations/no/default.json
  • public/translations/pl/default.json
  • public/translations/pt/default.json
  • public/translations/ro/default.json
  • public/translations/ru/default.json
  • public/translations/sq/default.json
  • public/translations/sv/default.json
  • public/translations/te/default.json
  • public/translations/th/default.json
  • public/translations/tr/default.json
  • public/translations/uk/default.json
  • public/translations/ur/default.json
  • public/translations/vi/default.json
  • public/translations/zh/default.json
  • src/components/feed-footer/feed-footer-utils.test.ts
  • src/components/feed-footer/feed-footer-utils.ts
  • src/components/feed-footer/feed-footer.module.css
  • src/components/feed-footer/feed-footer.tsx
  • src/components/feed-footer/feed-pagination.test.tsx
  • src/components/feed-footer/feed-pagination.tsx
  • src/hooks/use-feed-pagination.test.ts
  • src/hooks/use-feed-pagination.ts
  • src/stores/use-content-options-store.test.ts
  • src/stores/use-content-options-store.ts
  • src/views/all/all.tsx
  • src/views/community/community.tsx
  • src/views/domain/domain.tsx
  • src/views/home/home.tsx
  • src/views/mod/mod.tsx
  • src/views/settings/content-options/content-options.tsx

Comment thread src/components/feed-footer/feed-footer-utils.ts Outdated
Comment thread src/views/community/community.tsx
@tomcasaburi
tomcasaburi merged commit a3c6246 into master Jul 23, 2026
8 checks passed
@tomcasaburi
tomcasaburi deleted the codex/feature/paginated-feed-default branch July 23, 2026 12:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant