fixup modifer case

tests/dummy/app/components/my-modifier.js

@@ -1,23 +1,32 @@
 import Component from '@glimmer/component';
 import { action, set } from '@ember/object';
-import InViewportMixin from 'ember-in-viewport';
+import { inject as service } from '@ember/service';
+
+export default class MyModifier extends Component {
+  @service inViewport;
 
-export default class MyModifier extends Component.extend(InViewportMixin) {
   @action
   setupInViewport(element) {
-    this.watchElement(element);
+    const viewportSpy = true;
+    const viewportTolerance = {
+      bottom: 300,
+    };
+    const { onEnter } = this.inViewport.watchElement(element, { viewportSpy, viewportTolerance });
+    onEnter(this.didEnterViewport.bind(this));
   }
 
   constructor() {
     super(...arguments);
-
-    set(this, 'viewportSpy', true);
-    set(this, 'viewportTolerance', {
-      bottom: 300,
-    });
   }
 
   didEnterViewport() {
-    this.infinityLoad();
+    this.args.infinityLoad();
+  }
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+
+    const loader = document.getElementById('loader');
+    this.inViewport.stopWatching(loader);
   }
 }

tests/dummy/app/controllers/infinity-modifier.js

@@ -1,46 +1,37 @@
 import Controller from '@ember/controller';
-import { set, action } from '@ember/object';
-import { later } from '@ember/runloop';
-import { Promise } from 'rsvp';
+import { action, set } from '@ember/object';
 
-const images = ['jarjan', 'aio___', 'kushsolitary', 'kolage', 'idiot', 'gt'];
+let rect =
+  '<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>';
+let circle =
+  '<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>';
+let line =
+  '<line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>';
 
+const images = [rect, circle, line];
 const arr = Array.apply(null, Array(10));
 const models = [
-  ...arr.map(() => {
-    return {
-      bgColor: 'E8D26F',
-      url: `https://s3.amazonaws.com/uifaces/faces/twitter/${
-        images[(Math.random() * images.length) | 0]
-      }/128.jpg`,
-    };
-  }),
+  ...arr.map(() => `${images[(Math.random() * images.length) | 0]}`),
 ];
 
-export default class InfinityModifier extends Controller {
+export default class InfinityClass extends Controller {
+  constructor() {
+    super(...arguments);
+    this.viewportToleranceOverride = {
+      bottom: 200,
+    };
+  }
+
   models = models;
 
   @action
   infinityLoad() {
     const arr = Array.apply(null, Array(10));
     const newModels = [
-      ...arr.map(() => {
-        return {
-          bgColor: '0790EB',
-          url: `https://s3.amazonaws.com/uifaces/faces/twitter/${
-            images[(Math.random() * images.length) | 0]
-          }/128.jpg`,
-        };
-      }),
+      ...arr.map(() => `${images[(Math.random() * images.length) | 0]}`),
     ];
-
-    return new Promise((resolve) => {
-      later(() => {
-        const models = this.models;
-        models.push(...newModels);
-        set(this, 'models', Array.prototype.slice.call(models));
-        resolve();
-      }, 0);
-    });
+    const models = this.models;
+    models.push(...newModels);
+    set(this, 'models', Array.prototype.slice.call(models));
   }
 }

tests/dummy/app/templates/infinity-modifier.hbs

@@ -1,9 +1,10 @@
 <ul>
-  {{#each this.models as |artwork|}}
-    <li>
-      <DummyArtwork @artwork={{artwork}} @artworkProfile="dummy" />
-    </li>
-
+  {{#each this.models as |val|}}
+    <div class="infinity-class-item">
+      <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        {{{val}}}
+      </svg>
+    </div>
   {{/each}}
 </ul>