diff --git a/frontend/app/analysis/index/template.hbs b/frontend/app/analysis/index/template.hbs
index 8ab9407a4..e021e2f8e 100644
--- a/frontend/app/analysis/index/template.hbs
+++ b/frontend/app/analysis/index/template.hbs
@@ -393,19 +393,16 @@
                     </tr>
                   {{/each}}
                   {{#if this._canLoadMore}}
-                    <tr>
-                      <td colspan="11" class="text-center">
-                        <InViewport
-                          @rootSelector="analysis-scrollable-container"
-                          @on-enter-viewport={{perform this.loadNext}}
-                          @on-exit-viewport={{fn
-                            (mut this._shouldLoadMore)
-                            false
-                          }}
-                        >
-                          Loading<span class="loading-dots"><i>.</i><i>.</i><i
-                            >.</i></span>
-                        </InViewport>
+                    <tr
+                      {{in-viewport
+                        onEnter=(perform this.loadNext)
+                        onExit=(fn (mut this._shouldLoadMore) false)
+                        viewportSpy=true
+                      }}
+                    >
+                      <td colspan="12" class="text-center">
+                        Loading<span class="loading-dots"><i>.</i><i>.</i><i
+                          >.</i></span>
                       </td>
                     </tr>
                   {{/if}}
diff --git a/frontend/app/components/in-viewport/component.js b/frontend/app/components/in-viewport/component.js
deleted file mode 100644
index 7ef4e05c5..000000000
--- a/frontend/app/components/in-viewport/component.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { action } from "@ember/object";
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-
-export default class InViewport extends Component {
-  @tracked rootSelector = "body";
-  @tracked rootMargin = 0;
-  _observer = null;
-
-  @action
-  registerObserver(element) {
-    const observer = new IntersectionObserver(
-      ([{ isIntersecting }]) => {
-        if (isIntersecting) {
-          return (this.args["on-enter-viewport"] ?? (() => {}))();
-        }
-
-        return (this.args["on-exit-viewport"] ?? (() => {}))();
-      },
-      {
-        root: document.querySelector(this.rootSelector),
-        rootMargin: `${this.rootMargin}px`,
-      }
-    );
-
-    this._observer = observer;
-
-    // eslint-disable-next-line ember/no-observers
-    observer.observe(element);
-  }
-
-  willDestroy(...args) {
-    super.willDestroy(...args);
-    this._observer?.disconnect();
-  }
-}
diff --git a/frontend/app/components/in-viewport/template.hbs b/frontend/app/components/in-viewport/template.hbs
deleted file mode 100644
index b00eeb733..000000000
--- a/frontend/app/components/in-viewport/template.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-<div
-  {{did-insert this.registerObserver}}>{{yield}}</div>
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index ac049bba3..a16d038f9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -75,6 +75,7 @@
     "ember-decorators": "6.1.1",
     "ember-event-helpers": "^0.1.1",
     "ember-fetch": "8.1.2",
+    "ember-in-viewport": "4.1.0",
     "ember-load-initializers": "2.1.2",
     "ember-math-helpers": "2.18.2",
     "ember-moment": "9.0.1",
@@ -107,6 +108,7 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-qunit": "7.3.4",
     "faker": "4.1.0",
+    "fast-redact": "3.3.0",
     "graphql": "16.8.1",
     "loader.js": "4.7.0",
     "miragejs": "^0.1.48",
@@ -142,8 +144,5 @@
         "marked"
       ]
     }
-  },
-  "dependencies": {
-    "fast-redact": "^3.3.0"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 506b3dcd8..69ae7b1cf 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -7,11 +7,6 @@ settings:
 overrides:
   ember-concurrency: ^2.1.1
 
-dependencies:
-  fast-redact:
-    specifier: ^3.3.0
-    version: 3.3.0
-
 devDependencies:
   '@adfinis/eslint-config':
     specifier: ^2.1.1
@@ -172,6 +167,9 @@ devDependencies:
   ember-fetch:
     specifier: 8.1.2
     version: 8.1.2
+  ember-in-viewport:
+    specifier: 4.1.0
+    version: 4.1.0(@babel/core@7.22.9)(webpack@5.76.2)
   ember-load-initializers:
     specifier: 2.1.2
     version: 2.1.2(@babel/core@7.22.9)
@@ -268,6 +266,9 @@ devDependencies:
   faker:
     specifier: 4.1.0
     version: 4.1.0
+  fast-redact:
+    specifier: 3.3.0
+    version: 3.3.0
   graphql:
     specifier: 16.8.1
     version: 16.8.1
@@ -4565,7 +4566,7 @@ packages:
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.1(@types/node@18.15.3)(typescript@4.9.5)
+      ts-node: 10.9.1(typescript@4.9.5)
       typescript: 4.9.5
     transitivePeerDependencies:
       - '@swc/core'
@@ -5636,7 +5637,7 @@ packages:
       lru-cache: 6.0.0
       mkdirp: 1.0.4
       npm-pick-manifest: 6.1.1
-      promise-inflight: 1.0.1(bluebird@3.7.2)
+      promise-inflight: 1.0.1
       promise-retry: 2.0.1
       semver: 7.6.2
       which: 2.0.2
@@ -8522,7 +8523,7 @@ packages:
       minipass-pipeline: 1.2.4
       mkdirp: 1.0.4
       p-map: 4.0.0
-      promise-inflight: 1.0.1(bluebird@3.7.2)
+      promise-inflight: 1.0.1
       rimraf: 3.0.2
       ssri: 8.0.1
       tar: 6.1.11
@@ -9401,7 +9402,7 @@ packages:
     dependencies:
       '@types/node': 18.15.3
       cosmiconfig: 8.0.0
-      ts-node: 10.9.1(@types/node@18.15.3)(typescript@4.9.5)
+      ts-node: 10.9.1(typescript@4.9.5)
       typescript: 4.9.5
     dev: true
 
@@ -11179,6 +11180,25 @@ packages:
       - supports-color
     dev: true
 
+  /ember-in-viewport@4.1.0(@babel/core@7.22.9)(webpack@5.76.2):
+    resolution: {integrity: sha512-3y6qWXuJPPc6vX2GfxWgtr+sDjb+bdZF9babstr0lTd8t8c1b42gJ13GaJqlylZIyZz2dEXFCimX9WAeudPv9g==}
+    engines: {node: 12.* || 14.* || >= 16}
+    dependencies:
+      '@embroider/macros': 1.16.1
+      ember-auto-import: 2.7.2(webpack@5.76.2)
+      ember-cli-babel: 7.26.11
+      ember-destroyable-polyfill: 2.0.3(@babel/core@7.22.9)
+      ember-modifier: 3.2.7(@babel/core@7.22.9)
+      fast-deep-equal: 2.0.1
+      intersection-observer-admin: 0.3.3
+      raf-pool: 0.1.4
+    transitivePeerDependencies:
+      - '@babel/core'
+      - '@glint/template'
+      - supports-color
+      - webpack
+    dev: true
+
   /ember-inflector@4.0.2:
     resolution: {integrity: sha512-+oRstEa52mm0jAFzhr51/xtEWpCEykB3SEBr7vUg8YnXUZJ5hKNBppP938q8Zzr9XfJEbzrtDSGjhKwJCJv6FQ==}
     engines: {node: 10.* || 12.* || >= 14}
@@ -11404,7 +11424,7 @@ packages:
       '@glimmer/component': ^1.1.2
       '@glimmer/tracking': ^1.1.2
       '@glint/template': '>= 0.8.3'
-      ember-concurrency: ^2.1.1
+      ember-concurrency: ^2.0.0
       ember-source: '>= 3.28.0'
     peerDependenciesMeta:
       '@ember/test-waiters':
@@ -12589,6 +12609,10 @@ packages:
     resolution: {integrity: sha512-ILKg69P6y/D8/wSmDXw35Ly0re8QzQ8pMfBCflsGiZG2ZjMUNLYNexA6lz5pkmJlepVdsiDFUxYAzPQ9/+iGLA==}
     dev: true
 
+  /fast-deep-equal@2.0.1:
+    resolution: {integrity: sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==}
+    dev: true
+
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -12625,7 +12649,7 @@ packages:
   /fast-redact@3.3.0:
     resolution: {integrity: sha512-6T5V1QK1u4oF+ATxs1lWUmlEk6P2T9HqJG3e2DnHOdVgZy2rFJBoEnrIedcTXlkAHU/zKC+7KETJ+KGGKwxgMQ==}
     engines: {node: '>=6'}
-    dev: false
+    dev: true
 
   /fast-sourcemap-concat@2.1.0:
     resolution: {integrity: sha512-L9uADEnnHOeF4U5Kc3gzEs3oFpNCFkiTJXvT+nKmR0zcFqHZJJbszWT7dv4t9558FJRGpCj8UxUpTgz2zwiIZA==}
@@ -14015,6 +14039,10 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /intersection-observer-admin@0.3.3:
+    resolution: {integrity: sha512-aKMJPw/8cxybcgYTbnwGn87VgSFbSNNqeChRJahD+ai+jtwlCOdIcEvtuBd2BWO9bPuylVgeQVmGGfX2aS1NIg==}
+    dev: true
+
   /invariant@2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
     dependencies:
@@ -16909,6 +16937,15 @@ packages:
     engines: {node: '>= 0.6.0'}
     dev: true
 
+  /promise-inflight@1.0.1:
+    resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
+    peerDependencies:
+      bluebird: '*'
+    peerDependenciesMeta:
+      bluebird:
+        optional: true
+    dev: true
+
   /promise-inflight@1.0.1(bluebird@3.7.2):
     resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
     peerDependencies:
@@ -17079,6 +17116,10 @@ packages:
       tiny-glob: 0.2.9
     dev: true
 
+  /raf-pool@0.1.4:
+    resolution: {integrity: sha512-BBPamTVuSprPq7CUmgxc+ycbsYUtUYnQtJYEfMHXMaostPaNpQzipLfSa/rwjmlgjBPiD7G+I+8W340sLOPu6g==}
+    dev: true
+
   /randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
     dependencies:
@@ -19047,7 +19088,7 @@ packages:
       tslib: 2.5.0
     dev: true
 
-  /ts-node@10.9.1(@types/node@18.15.3)(typescript@4.9.5):
+  /ts-node@10.9.1(typescript@4.9.5):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
     peerDependencies:
@@ -19068,7 +19109,6 @@ packages:
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.3
-      '@types/node': 18.15.3
       acorn: 8.8.2
       acorn-walk: 8.2.0
       arg: 4.1.3
diff --git a/frontend/tests/integration/components/in-viewport/component-test.js b/frontend/tests/integration/components/in-viewport/component-test.js
deleted file mode 100644
index c6a73081e..000000000
--- a/frontend/tests/integration/components/in-viewport/component-test.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
-import { setupRenderingTest } from "ember-qunit";
-import { module, test } from "qunit";
-
-module("Integration | Component | in viewport", function (hooks) {
-  setupRenderingTest(hooks);
-
-  test("renders", async function (assert) {
-    await render(hbs`
-      <div class="parent" style="heigth: 20px; overflow: scroll;">
-        <div class="child" style="heigth: 2000px;">
-          <InViewport>test</InViewport>
-        </div>
-      </div>
-    `);
-
-    assert.dom(".child").includesText("test");
-  });
-});