Spinner config is now reactive

- changed at boards as soon as changed in the settings

client/components/lists/listBody.jade

@@ -24,7 +24,7 @@ template(name="listBody")
 
 template(name="spinnerList")
   .sk-spinner.sk-spinner-list(
-    class="{{currentBoard.colorClass}} sk-spinner-{{Spinner.getSpinnerNameLC}}"
+    class="{{currentBoard.colorClass}} {{getSkSpinnerName}}"
     id="showMoreResults")
     +spinnerRaw
 

client/components/lists/listBody.js

@@ -1,3 +1,5 @@
+import { Spinner } from '/client/components/main/spinner';
+
 const subManager = new SubsManager();
 const InfiniteScrollIter = 10;
 
@@ -696,7 +698,7 @@ BlazeComponent.extendComponent({
   },
 }).register('searchElementPopup');
 
-BlazeComponent.extendComponent({
+(class extends Spinner {
   onCreated() {
     this.cardlimit = this.parentComponent().cardlimit;
 
@@ -724,7 +726,7 @@ BlazeComponent.extendComponent({
         .parentComponent()
         .data()._id;
     }
-  },
+  }
 
   onRendered() {
     this.spinner = this.find('.sk-spinner-list');
@@ -739,35 +741,37 @@ BlazeComponent.extendComponent({
     );
 
     this.updateList();
-  },
+  }
 
   onDestroyed() {
     $(this.container).off(`scroll.spinner_${this.swimlaneId}_${this.listId}`);
     $(window).off(`resize.spinner_${this.swimlaneId}_${this.listId}`);
-  },
+  }
+
+  checkIdleTime() {
+    return window.requestIdleCallback ||
+    function(handler) {
+      const startTime = Date.now();
+      return setTimeout(function() {
+        handler({
+          didTimeout: false,
+          timeRemaining() {
+            return Math.max(0, 50.0 - (Date.now() - startTime));
+          },
+        });
+      }, 1);
+    };
+  }
 
   updateList() {
     // Use fallback when requestIdleCallback is not available on iOS and Safari
     // https://www.afasterweb.com/2017/11/20/utilizing-idle-moments/
-    checkIdleTime =
-      window.requestIdleCallback ||
-      function(handler) {
-        const startTime = Date.now();
-        return setTimeout(function() {
-          handler({
-            didTimeout: false,
-            timeRemaining() {
-              return Math.max(0, 50.0 - (Date.now() - startTime));
-            },
-          });
-        }, 1);
-      };
 
     if (this.spinnerInView()) {
       this.cardlimit.set(this.cardlimit.get() + InfiniteScrollIter);
-      checkIdleTime(() => this.updateList());
+      this.checkIdleTime(() => this.updateList());
     }
-  },
+  }
 
   spinnerInView() {
     // spinner deleted
@@ -786,5 +790,9 @@ BlazeComponent.extendComponent({
     }
 
     return bottomViewPosition > spinnerOffsetTop;
-  },
-}).register('spinnerList');
+  }
+
+  getSkSpinnerName() {
+    return "sk-spinner-" + super.getSpinnerName().toLowerCase();
+  }
+}.register('spinnerList'));

client/components/main/spinner.jade

@@ -1,5 +1,5 @@
 template(name="spinner")
-  +Template.dynamic(template=Spinner.getSpinnerTemplate)
+  +Template.dynamic(template=getSpinnerTemplate)
 
 template(name="spinnerRaw")
-  +Template.dynamic(template=Spinner.getSpinnerTemplateRaw)
+  +Template.dynamic(template=getSpinnerTemplateRaw)

client/components/main/spinner.js

@@ -1,37 +1,31 @@
-import Settings from '/models/settings';
-
-Spinner = {
-  getSpinnerTemplate() {
-    return 'spinner' + this.getSpinnerName();
-  },
-
-  getSpinnerTemplateRaw() {
-    return 'spinner' + this.getSpinnerName() + 'Raw';
-  },
-
-  currentSetting: new ReactiveVar(),
+Meteor.subscribe('setting');
 
+export class Spinner extends BlazeComponent {
   currentSettings() {
-    return this.currentSetting.get();
-  },
+    return Settings.findOne();
+  }
 
   getSpinnerName() {
     let ret = 'Bounce';
-    if (this.currentSettings()) {
-      ret = this.currentSettings().spinnerName;
+    let settings = this.currentSettings();
+
+    if (settings && settings.spinnerName) {
+      ret = settings.spinnerName;
     }
     return ret;
-  },
+  }
 
-  getSpinnerNameLC() {
-    return this.getSpinnerName().toLowerCase();
-  },
+  getSpinnerTemplate() {
+    return 'spinner' + this.getSpinnerName();
+  }
 }
 
-Blaze.registerHelper('Spinner', Spinner);
+(class extends Spinner {
+}.register('spinner'));
 
-Meteor.subscribe('setting', {
-  onReady() {
-    Spinner.currentSetting.set(Settings.findOne());
-  },
-});
+(class extends Spinner {
+  getSpinnerTemplateRaw() {
+    let ret = super.getSpinnerTemplate() + 'Raw';
+    return ret;
+  }
+}.register('spinnerRaw'));