Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-18 00:10:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

list: do not use IntersectionObserver to reduce CPU usage

Browse source 
Switch back to a custom spinner detection, as the IntersectionObserver
is eating a lot of CPU resources on idle.

This should also take care of #2250 properly: the previous `onDestroyed()`
was removing the resize and scroll callbacks, but they were not unique
enough, and they were shared across swimlanes. So if a list had 2 swimlanes
with spinners, when one was removed, the other was not triggering its
callbacks anymore.

Related: #2294
This commit is contained in:
Benjamin Tissoires 2019-04-01 23:35:12 +02:00
parent 980db9cb0c
commit 261754f18b
1 changed files with 29 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

48
client/components/lists/listBody.js
View file

@ -615,40 +615,50 @@ BlazeComponent.extendComponent({
BlazeComponent.extendComponent({ BlazeComponent.extendComponent({
onCreated() { onCreated() {
this.spinnerShown = false;
this.cardlimit = this.parentComponent().cardlimit; this.cardlimit = this.parentComponent().cardlimit;
this.listId = this.parentComponent().data()._id;
this.swimlaneId = '';
const boardView = Meteor.user().profile.boardView;
if (boardView === 'board-view-swimlanes')
this.swimlaneId = this.parentComponent().parentComponent().parentComponent().data()._id;
}, },
onRendered() { onRendered() {
const spinner = this.find('.sk-spinner-list'); this.spinner = this.find('.sk-spinner-list');
this.container = this.$(this.spinner).parents('.js-perfect-scrollbar')[0];
if (spinner) { $(this.container).on(`scroll.spinner_${this.swimlaneId}_${this.listId}`, () => this.updateList());
const options = { $(window).on(`resize.spinner_${this.swimlaneId}_${this.listId}`, () => this.updateList());
root: null, // we check if the spinner is on the current viewport
rootMargin: '0px',
threshold: 0.25,
};
this.observer = new IntersectionObserver((entries) => { this.updateList();
entries.forEach((entry) => {
this.spinnerShown = entry.isIntersecting;
this.updateList();
});
}, options);
this.observer.observe(spinner);
}
}, },
onDestroyed() { onDestroyed() {
this.observer.disconnect(); $(this.container).off(`scroll.spinner_${this.swimlaneId}_${this.listId}`);
$(window).off(`resize.spinner_${this.swimlaneId}_${this.listId}`);
}, },
updateList() { updateList() {
if (this.spinnerShown) { if (this.spinnerInView()) {
this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter); this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
window.requestIdleCallback(() => this.updateList()); window.requestIdleCallback(() => this.updateList());
} }
}, },
spinnerInView() {
const parentViewHeight = this.container.clientHeight;
const bottomViewPosition = this.container.scrollTop + parentViewHeight;
const threshold = this.spinner.offsetTop;
// spinner deleted
if (!this.spinner.offsetTop) {
return false;
}
return bottomViewPosition > threshold;
},
}).register('spinnerList'); }).register('spinnerList');