From 46f1b237f6ea2c2e55e9afb95fcc2b1ec0b618e4 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Wed, 10 Jul 2024 11:32:44 +0200
Subject: [PATCH] feat: add support for an IntersectionObserver in case the
 images are lazily loaded

---
 .../components/imaging-thumbnail.element.ts   | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/imaging/components/imaging-thumbnail.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/imaging/components/imaging-thumbnail.element.ts
index 1407b2f15b..cdcb474deb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/imaging/components/imaging-thumbnail.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/imaging/components/imaging-thumbnail.element.ts
@@ -65,14 +65,33 @@ export class UmbImagingThumbnailElement extends UmbLitElement {
 
 	#imagingRepository = new UmbImagingRepository(this);
 
-	protected override firstUpdated() {
-		this.#generateThumbnailUrl();
-	}
+	#intersectionObserver?: IntersectionObserver;
 
 	override render() {
 		return html` ${this.#renderThumbnail()} ${when(this._isLoading, () => this.#renderLoading())} `;
 	}
 
+	override connectedCallback() {
+		super.connectedCallback();
+
+		if (this.loading === 'lazy') {
+			this.#intersectionObserver = new IntersectionObserver((entries) => {
+				if (entries[0].isIntersecting) {
+					this.#generateThumbnailUrl();
+					this.#intersectionObserver?.disconnect();
+				}
+			});
+			this.#intersectionObserver.observe(this);
+		} else {
+			this.#generateThumbnailUrl();
+		}
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#intersectionObserver?.disconnect();
+	}
+
 	#renderLoading() {
 		return html`<div class="container"><uui-loader></uui-loader></div>`;
 	}