Bug/66552: Large amount of comments causes work package view to freeze (introduce lazy-loading and loading indicator for Activity tab)

[akabiru]

Ticket

https://community.openproject.org/wp/66552

What are you trying to accomplish?

Add lazy loaded pages to the activity tab. Remove the deferred render-all pages mechanism.

🌮 Todos (WIP 🚧 )

• Address deep-linked comments.
• Address tab replacement (through sorting or filter changes).
• Overlay filter & sorting components so that they are always visible (On Desktop)
• Optimise DB queries, move away from slow array based pagination (https://community.openproject.org/wp/68063)

Important

The last two items, filtering & DB query optimisation will be handled separately.

Screenshots

deep-linking-works.mp4

What approach did you choose and why?

Eager load only one page (current), lazy load all other pages as they become visible (useIntersection#appear()) for at least 75ms.

Note

This work is behind a feature flag to allow for adequate testing & reasonable fallback
OPENPROJECT_FEATURE_WP_ACTIVITY_TAB_LAZY_PAGINATION_ACTIVE

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)

[Copilot]

Pull Request Overview

This PR implements lazy loading with infinite scrolling for the Activity tab to address performance issues when work packages have large amounts of comments. The change replaces the previous deferred rendering mechanism with a paginated approach using the Pagy gem.

Key changes include:

• Introduction of infinite scroll functionality triggered by intersection observer
• Implementation of Pagy-based pagination with 30 items per page
• Addition of scroll position preservation during DOM manipulations
• New skeleton loading indicator for better user experience

Reviewed Changes

Copilot reviewed 19 out of 21 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
frontend/src/stimulus/setup.ts	Registers new infinite scroll Stimulus controller
frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/services/dom_helpers.ts	Provides scroll preservation utilities for infinite scroll
frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/infinite-scroll.controller.ts	Main infinite scroll controller implementation
config/routes.rb	Adds page_streams route for pagination
config/initializers/permissions.rb	Grants page_streams permission
config/initializers/pagy.rb	Pagy pagination library configuration
app/controllers/work_packages/activities_tab_controller.rb	Implements pagination logic and page streaming
app/controllers/concerns/op_turbo/component_stream.rb	Adds turbo stream helpers for pagination
app/components/work_packages/activities_tab/shared_helpers.rb	Adds sorting helper methods
app/components/work_packages/activities_tab/journals/page_component.rb	Component for rendering journal pages
app/components/work_packages/activities_tab/journals/infinite_scroll_component.rb	Infinite scroll trigger component
app/components/work_packages/activities_tab/journals/index_component.rb	Refactored to support pagination
app/components/work_packages/activities_tab/index_component.rb	Updated to pass pagination data
app/components/concerns/work_packages/activities_tab/stimulus_controllers.rb	Adds infinite scroll controller reference
Gemfile	Adds Pagy gem dependency

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[akabiru]

CI ✅ https://github.com/opf/openproject/actions/runs/18345161589

[github-actions]

Caution

The provided work package version does not match the core version

Details:

• Work package URL: https://community.openproject.org/wp/66552
• Work package version: 16.6.0
• Core version: 16.5.1

Please make sure that:

• The work package version OR your pull request target branch is correct

[judithroth]

Wow, nice work! As far as I can tell this works amazingly! 🎉
I have some small comments / questions, but nothing blocking 🙂

[akabiru]

👋🏾 @myabc @dombesz - will merge now to get things moving (Thanks for the review @judithroth ! 💪🏾 ). Please still feel free to share any feedback you have- as I spoke to you both on the topic :)

[dombesz]

Nice improvement @akabiru ! Bit late to the party, but I just leave a few comments. None of them are critical.