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.

1 files changed, 36 insertions, 29 deletions

diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js
index d6a62cc9..2e6591e2 100644
--- a/client/components/lists/listBody.js
+++ b/client/components/lists/listBody.js
@@ -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');