list: make sure the spinner of infinite scrolling doesn't show on load

When loading a board on a high resolution screen, there is a chance there
is not enough cards displayed and the spinner is still there, spinning
forever.

Add an idle callback that checks if the spinner is still there, and while
it is there, extend the number of cards to show.

Fixes #2250

1 files changed, 10 insertions, 3 deletions

diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js
index 006f8f0d..d6a62cc9 100644
--- a/client/components/lists/listBody.js
+++ b/client/components/lists/listBody.js
@@ -5,6 +5,7 @@ BlazeComponent.extendComponent({
   onCreated() {
     // for infinite scrolling
     this.cardlimit = new ReactiveVar(InfiniteScrollIter);
+    this.spinnerShown = false;
   },
 
   onRendered() {
@@ -19,9 +20,8 @@ BlazeComponent.extendComponent({
 
       const observer = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
-          }
+          this.spinnerShown = entry.isIntersecting;
+          this.updateList();
         });
       }, options);
 
@@ -29,6 +29,13 @@ BlazeComponent.extendComponent({
     }
   },
 
+  updateList() {
+    if (this.spinnerShown) {
+      this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
+      window.requestIdleCallback(() => this.updateList());
+    }
+  },
+
   mixins() {
     return [Mixins.PerfectScrollbar];
   },