ENG-511 Image intersection issues (#894)

.changeset/poor-spies-fetch.md

@@ -0,0 +1,8 @@
+---
+"@getflip/swirl-components": minor
+"@getflip/swirl-components-angular": minor
+"@getflip/swirl-components-react": minor
+---
+
+Intersecting image-grid-item images only load if they're visible in the final
+state

packages/swirl-components/src/components/swirl-image-grid-item/swirl-image-grid-item.tsx

@@ -11,6 +11,7 @@ import {
   Watch,
 } from "@stencil/core";
 import classnames from "classnames";
+import { debounce } from "../../utils";
 
 export type SwirlImageGridItemLoading =
   | "lazy"
@@ -102,19 +103,20 @@ export class SwirlImageGridItem {
       return;
     }
 
-    this.intersectionObserver = new IntersectionObserver(
-      this.onVisibilityChange.bind(this),
-      {
-        threshold: 0,
-      }
-    );
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      this.handleIntersectionEntries(entries);
+    });
 
     this.intersectionObserver.observe(this.el);
   }
 
-  private onVisibilityChange(entries: IntersectionObserverEntry[]) {
-    this.inViewport = entries.some((entry) => entry.isIntersecting);
-  }
+  private handleIntersectionEntries = debounce(
+    (entries: IntersectionObserverEntry[]) => {
+      const sorted = [...entries].sort((a, b) => a.time - b.time);
+      this.inViewport = sorted.at(-1).isIntersecting;
+    },
+    250
+  );
 
   private onLoad = () => {
     this.error = false;