list: move the spinner into its own blaze component

This way, when a list is at the maximum number of cards shown and adding
a new card would make the spinner appear, the list would load the next
N items.

This can happen if user A and B are both looking at the same board,
B adds a new cards, and A will see the spinner and will not be able to
remove it.
This commit is contained in:
Benjamin Tissoires 2019-03-26 16:20:59 +01:00
parent 00376b43f8
commit cbb6c82113
2 changed files with 47 additions and 37 deletions

View file

@ -5,35 +5,6 @@ BlazeComponent.extendComponent({
onCreated() {
// for infinite scrolling
this.cardlimit = new ReactiveVar(InfiniteScrollIter);
this.spinnerShown = false;
},
onRendered() {
const spinner = this.find('.sk-spinner-list');
if (spinner) {
const options = {
root: null, // we check if the spinner is on the current viewport
rootMargin: '0px',
threshold: 0.25,
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
this.spinnerShown = entry.isIntersecting;
this.updateList();
});
}, options);
observer.observe(spinner);
}
},
updateList() {
if (this.spinnerShown) {
this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
window.requestIdleCallback(() => this.updateList());
}
},
mixins() {
@ -641,3 +612,39 @@ BlazeComponent.extendComponent({
}];
},
}).register('searchElementPopup');
BlazeComponent.extendComponent({
onCreated() {
this.spinnerShown = false;
this.cardlimit = this.parentComponent().cardlimit;
},
onRendered() {
const spinner = this.find('.sk-spinner-list');
if (spinner) {
const options = {
root: null, // we check if the spinner is on the current viewport
rootMargin: '0px',
threshold: 0.25,
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
this.spinnerShown = entry.isIntersecting;
this.updateList();
});
}, options);
observer.observe(spinner);
}
},
updateList() {
if (this.spinnerShown) {
this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
window.requestIdleCallback(() => this.updateList());
}
},
}).register('spinnerList');