Content
View differences
Updated by Parimal Satyal 9 months ago
### Steps to reproduce
1. Have a workpackage with a large amount of comments (570 is mentioned as an example)
2. Attempt to open the workpackage
### What is the buggy behavior?
* Browser freezes/becomes unresponsive
* Even if - after a long wait - the page loads, it does not work well. Scrolling breaks and the page feels unresponsive.
* After analysis, it appears the issues comes from the large number of comments on some tasks (570+)
* Browsers slow down and freeze the moment you open the view to a task
* _Especially chromium-based browsers are affected_
* _Especially on middle to lower end or older hardware (Intel 3rd/4th gen, faster but still noticable on 6th)_
* _Firefox also slows down but wont freeze as extremely_
* _Profilers pinpoint these to polyfill library and callstacks go to mutationobservers/callbacks_
* _Removing the callbacks through browser-extensions like tampermonkey massively increases web performance, but breaks .. input validation and actually saving changes to backend_
* _When opening tasks that aren't affected- as long as they have a referenced task with that issue, the browser still experiences significant slowdown_
* _Creating new tasks and viewing or editing these works fine without performance impact_
### What is the expected behavior?
* 1. Workpackages with large amount of comments don't experience performance issues. We partially do this by limiting the number of comments loaded and adopting a progressive/lazy-loading approach.
* Pre-load a fixed number _n_ of comments/activities (50 journals?)
* When you reach the the end of the loaded list, show a loading indicator ([SkeletonBox](https://qa.openproject-edge.com/lookbook/inspect/primer/alpha/skeleton_box/default), see [Figma mockup](https://www.figma.com/design/Lb7ao364ppIiPxp9ptSXkM/Activity-tab-and-Emoji?node-id=1378-6467&t=kEmXSPj3jvlc5Ydt-4) for design) and then load another _n_ items.
* And so on...
* When loading a page with a deep-link to a comment, load _n/2_ above and below the linked comment.
<img class="image_resized op-uc-image op-uc-image_inline" style="width:394px;" src="/api/v3/attachments/784063/content">
###
###
### Environment information
**OpenProject installation type**
* Selfhosted, Packaged installation
* Ubuntu 20.04.6 LTS
**OpenProject version**
_16.2.2_
**Browser**
* [x] Chrome
* [x] Firefox
* [ ] Safari
* [ ] Mobile Safari
* [ ] Other (please specify)
**Operating System**
* [x] Windows
* [ ] Mac OS X
* [ ] Mobile iOS
* [ ] Mobile Android
* [ ] Linux (please specify distro)
* [ ] Chrome OS
* [ ] Other (please specify)
**Language**
_English and German_
1. Have a workpackage with a large amount of comments (570 is mentioned as an example)
2. Attempt to open the workpackage
### What is the buggy behavior?
* Browser freezes/becomes unresponsive
* Even if - after a long wait - the page loads, it does not work well. Scrolling breaks and the page feels unresponsive.
* After analysis, it appears the issues comes from the large number of comments on some tasks (570+)
* Browsers slow down and freeze the moment you open the view to a task
* _Especially chromium-based browsers are affected_
* _Especially on middle to lower end or older hardware (Intel 3rd/4th gen, faster but still noticable on 6th)_
* _Firefox also slows down but wont freeze as extremely_
* _Profilers pinpoint these to polyfill library and callstacks go to mutationobservers/callbacks_
* _Removing the callbacks through browser-extensions like tampermonkey massively increases web performance, but breaks .. input validation and actually saving changes to backend_
* _When opening tasks that aren't affected- as long as they have a referenced task with that issue, the browser still experiences significant slowdown_
* _Creating new tasks and viewing or editing these works fine without performance impact_
### What is the expected behavior?
*
* Pre-load a fixed number _n_ of comments/activities (50 journals?)
* When you reach the the end of the loaded list, show a loading indicator ([SkeletonBox](https://qa.openproject-edge.com/lookbook/inspect/primer/alpha/skeleton_box/default), see [Figma mockup](https://www.figma.com/design/Lb7ao364ppIiPxp9ptSXkM/Activity-tab-and-Emoji?node-id=1378-6467&t=kEmXSPj3jvlc5Ydt-4) for design) and then load another _n_ items.
* And so on...
* When loading a page with a deep-link to a comment, load _n/2_ above and below the linked comment.
<img class="image_resized op-uc-image op-uc-image_inline" style="width:394px;" src="/api/v3/attachments/784063/content">
###
### Environment information
**OpenProject installation type**
* Selfhosted, Packaged installation
* Ubuntu 20.04.6 LTS
**OpenProject version**
_16.2.2_
**Browser**
* [x] Chrome
* [x] Firefox
* [ ] Safari
* [ ] Mobile Safari
* [ ] Other (please specify)
**Operating System**
* [x] Windows
* [ ] Mac OS X
* [ ] Mobile iOS
* [ ] Mobile Android
* [ ] Linux (please specify distro)
* [ ] Chrome OS
* [ ] Other (please specify)
**Language**
_English and German_