fix(html): height observer memory leak

1 files changed, 33 insertions, 26 deletions

diff --git a/src/lib/Utility/html.ts b/src/lib/Utility/html.ts
index 8a0b7888..9dc16634 100644
--- a/src/lib/Utility/html.ts
+++ b/src/lib/Utility/html.ts
@@ -4,32 +4,39 @@ import { get } from 'svelte/store';
 export const nbsp = (str: string) => str.replace(/ /g, ' ');
 
 export const createHeightObserver = (details = true) => {
-	const heightObserver = new ResizeObserver(() => {
-		if (get(settings).displayLimitListHeight) {
-			document.querySelectorAll('.list').forEach((list) => {
-				const element = list as HTMLElement;
-
-				element.style.height = 'auto';
-
-				const elementBound = element.getBoundingClientRect();
-				const height = window.innerHeight - elementBound.top - 2.5 * 16;
-
-				if (elementBound.height > height) element.style.height = `${height}px`;
-			});
+	document.querySelectorAll('.list').forEach((element) => {
+		if (
+			!(
+				element as unknown as {
+					dataset: { observed: string };
+				}
+			).dataset.observed
+		) {
+			new ResizeObserver((entries) => {
+				entries.forEach((entry) => {
+					const element = entry.target as HTMLElement;
+
+					if (get(settings).displayLimitListHeight) {
+						element.style.height = 'auto';
+
+						const elementBound = element.getBoundingClientRect();
+						const height = window.innerHeight - elementBound.top - 2.5 * 16;
+
+						if (elementBound.height > height) element.style.height = `${height}px`;
+					}
+				});
+			}).observe(element);
+
+			if (details)
+				new MutationObserver((mutations) => {
+					mutations.forEach((mutation) => {
+						const element = mutation.target as HTMLDetailsElement;
+
+						if (element.tagName === 'DETAILS' && !element.open) element.style.height = 'auto';
+					});
+				}).observe(element, { attributes: true });
+
+			element.setAttribute('data-observed', 'true');
 		}
 	});
-	const collapseObserver = new MutationObserver(() => {
-		document.querySelectorAll('.list').forEach((list) => {
-			const element = list as HTMLDetailsElement;
-
-			if (element.tagName === 'DETAILS' && !element.open) element.style.height = 'auto';
-		});
-	});
-
-	document.querySelectorAll('.list').forEach((element) => heightObserver.observe(element));
-
-	if (details)
-		document
-			.querySelectorAll('.list')
-			.forEach((element) => collapseObserver.observe(element, { attributes: true }));
 };