Dashboard UI freezes on next page loading
- Dominant language
- JavaScript
- Stars
- 9.4k
- Forks
- 858
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
I currently have a set up which will freeze the browser (Chrome) for about 10 seconds when scrolling further than around three pages.
I spent some time debugging and noticed that it spends this time in layouting, because of this line:
https://github.com/Automattic/kue/blob/master/lib/http/public/javascripts/job.js#L124
I guess that it is because I actually return quite a bit information in that row (json data).
Delaying the rendering seems to be a reasonable workaround since it allows the browser to handle other action in between. So what I do now is the following:
```
setTimeout(function() {
view.data.add(row);
}, 0);
```
I don't think that this a "real" solution for the problem. I would probably say that a job does not need to render any information of jobs that are not selected (clicked to open).
A lazy rendering approach would solve this cleanly, if the data is only rendered whenever the detail box is opened/clicked.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in lib/http/public/javascripts/job.js at line 124 and reproduce the freeze by scrolling through several dashboard pages in Chrome. Inspect how row data is rendered and compare the reported setTimeout workaround with the requested lazy rendering for unselected jobs. Done means loading additional pages no longer freezes the browser for around 10 seconds while job details remain available when opened.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100