mirror of
https://github.com/wekan/wekan.git
synced 2025-12-16 15:30:13 +01:00
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:
parent
00376b43f8
commit
cbb6c82113
2 changed files with 47 additions and 37 deletions
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue