Revert spinner etc fixes of Wekan v2.56, because of some new bugs.

Thanks to gerroon !

Related #2250

1 files changed, 49 insertions, 40 deletions

diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js
index 112b6379..7d767011 100644
--- a/client/components/lists/listBody.js
+++ b/client/components/lists/listBody.js
@@ -7,6 +7,28 @@ BlazeComponent.extendComponent({
     this.cardlimit = new ReactiveVar(InfiniteScrollIter);
   },
 
+  onRendered() {
+    const domElement = this.find('.js-perfect-scrollbar');
+
+    this.$(domElement).on('scroll', () => this.updateList(domElement));
+    $(window).on(`resize.${this.data().listId}`, () => this.updateList(domElement));
+
+    // we add a Mutation Observer to allow propagations of cardlimit
+    // when the spinner stays in the current view (infinite scrolling)
+    this.mutationObserver = new MutationObserver(() => this.updateList(domElement));
+
+    this.mutationObserver.observe(domElement, {
+      childList: true,
+    });
+
+    this.updateList(domElement);
+  },
+
+  onDestroyed() {
+    $(window).off(`resize.${this.data().listId}`);
+    this.mutationObserver.disconnect();
+  },
+
   mixins() {
     return [Mixins.PerfectScrollbar];
   },
@@ -169,11 +191,38 @@ BlazeComponent.extendComponent({
     });
   },
 
+  spinnerInView(container) {
+    const parentViewHeight = container.clientHeight;
+    const bottomViewPosition = container.scrollTop + parentViewHeight;
+
+    const spinner = this.find('.sk-spinner-list');
+
+    const threshold = spinner.offsetTop;
+
+    return bottomViewPosition > threshold;
+  },
+
   showSpinner(swimlaneId) {
     const list = Template.currentData();
     return list.cards(swimlaneId).count() > this.cardlimit.get();
   },
 
+  updateList(container) {
+    // first, if the spinner is not rendered, we have reached the end of
+    // the list of cards, so skip and disable firing the events
+    const target = this.find('.sk-spinner-list');
+    if (!target) {
+      this.$(container).off('scroll');
+      $(window).off(`resize.${this.data().listId}`);
+      return;
+    }
+
+    if (this.spinnerInView(container)) {
+      this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
+      Ps.update(container);
+    }
+  },
+
   canSeeAddCard() {
     return !this.reachedWipLimit() && Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
   },
@@ -612,43 +661,3 @@ 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,
-      };
-
-      this.observer = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          this.spinnerShown = entry.isIntersecting;
-          this.updateList();
-        });
-      }, options);
-
-      this.observer.observe(spinner);
-    }
-  },
-
-  onDestroyed() {
-    this.observer.disconnect();
-  },
-
-  updateList() {
-    if (this.spinnerShown) {
-      this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
-      window.requestIdleCallback(() => this.updateList());
-    }
-  },
-
-}).register('spinnerList');