Merge pull request #880 from adfinis/fix-analytics-loading-loop

fix: analytics loading loop

app/analysis/index/controller.js

@@ -144,6 +144,7 @@ export default class AnalysisController extends Controller.extend(
   @tracked totalTime = moment.duration();
   @tracked totalItems = A();
   @tracked selectedReportIds;
+  @tracked _dataCache = A();
 
   @tracked user;
   @tracked reviewer;
@@ -194,7 +195,6 @@ export default class AnalysisController extends Controller.extend(
   }
 
   setup() {
-    this._dataCache = A();
     this.selectedReportIds = A();
 
     this.prefetchData.perform();

app/components/in-viewport/component.js

@@ -1,41 +1,36 @@
-import Component from "@ember/component";
-import { get } from "@ember/object";
-import classic from "ember-classic-decorator";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 
-@classic
-class InViewportComponent extends Component {
-  rootSelector = "body";
-  rootMargin = 0;
+export default class InViewport extends Component {
+  @tracked rootSelector = "body";
+  @tracked rootMargin = 0;
   _observer = null;
 
-  didInsertElement(...args) {
-    super.didInsertElement(...args);
-
+  @action
+  registerObserver(element) {
     const observer = new IntersectionObserver(
       ([{ isIntersecting }]) => {
         if (isIntersecting) {
-          return (get(this, "on-enter-viewport") ?? (() => {}))();
+          return (this.args["on-enter-viewport"] ?? (() => {}))();
         }
 
-        return (get(this, "on-exit-viewport") ?? (() => {}))();
+        return (this.args["on-exit-viewport"] ?? (() => {}))();
       },
       {
         root: document.querySelector(this.rootSelector),
         rootMargin: `${this.rootMargin}px`,
       }
     );
 
-    this.set("_observer", observer);
+    this._observer = observer;
 
     // eslint-disable-next-line ember/no-observers
-    observer.observe(this.element);
+    observer.observe(element);
   }
 
-  willDestroyElement(...args) {
-    super.willDestroyElement(...args);
-
-    this._observer.disconnect();
+  willDestroy(...args) {
+    super.willDestroy(...args);
+    this._observer?.disconnect();
   }
 }
-
-export default InViewportComponent;

app/components/in-viewport/template.hbs

@@ -1 +1,2 @@
-{{yield}}
+<div
+  {{did-insert this.registerObserver}}>{{yield}}</div>

tests/integration/components/in-viewport/component-test.js

@@ -10,7 +10,7 @@ module("Integration | Component | in viewport", function (hooks) {
     await render(hbs`
       <div class="parent" style="heigth: 20px; overflow: scroll;">
         <div class="child" style="heigth: 2000px;">
-          {{#in-viewport}}test{{/in-viewport}}
+          <InViewport>test</InViewport>
         </div>
       </div>
     `);