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

Thanks to gerroon !

Related #2250

client/components/lists/listBody.jade

@@ -13,7 +13,14 @@ template(name="listBody")
               class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
           +minicard(this)
       if (showSpinner (idOrNull ../../_id))
-        +spinnerList
+        .sk-spinner.sk-spinner-wave.sk-spinner-list(
+          class=currentBoard.colorClass
+          id="showMoreResults")
+          .sk-rect1
+          .sk-rect2
+          .sk-rect3
+          .sk-rect4
+          .sk-rect5
 
       if canSeeAddCard
         +inlinedForm(autoclose=false position="bottom")
@@ -23,16 +30,6 @@ template(name="listBody")
             i.fa.fa-plus
             | {{_ 'add-card'}}
 
-template(name="spinnerList")
-  .sk-spinner.sk-spinner-wave.sk-spinner-list(
-    class=currentBoard.colorClass
-    id="showMoreResults")
-    .sk-rect1
-    .sk-rect2
-    .sk-rect3
-    .sk-rect4
-    .sk-rect5
-
 template(name="addCardForm")
   .minicard.minicard-composer.js-composer
     if getLabels

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');