Merge pull request #474 from biati-digital/potential-memory-leak-fix

perf(glightbox): Fixes potential memory leak with IntersectionObserver
biati-digital · Mar 29, 2024 · 2748089 · 2748089
2 parents 3f9a456 + c35831e
commit 2748089
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/.changeset/tasty-melons-occur.md b/.changeset/tasty-melons-occur.md
@@ -0,0 +1,5 @@
+---
+"glightbox": patch
+---
+
+Adds cleanup for IntersectionObserver
diff --git a/packages/glightbox/src/glightbox.ts b/packages/glightbox/src/glightbox.ts
@@ -15,6 +15,7 @@ export default class GLightbox {
     nextButton: HTMLButtonElement | null = null;
     overlay: HTMLButtonElement | null = null;
     slidesContainer: HTMLElement | null = null;
+    private observer: IntersectionObserver;
 
     constructor(options: Partial<GLightboxOptions> = {}) {
         this.options = mergeObjects(GLightboxDefaults, options);
@@ -288,7 +289,7 @@ export default class GLightbox {
 
         this.processVariables(this.modal);
 
-        const observer = new IntersectionObserver((entries) => {
+        this.observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
                 removeClass(entry.target, 'visible');
                 if (entry.isIntersecting && this.state.get('open')) {
@@ -333,7 +334,7 @@ export default class GLightbox {
                 this.slidesContainer?.insertAdjacentHTML('beforeend', slideHTML);
                 const created = this.slidesContainer?.querySelectorAll('.gl-slide')[index];
                 if (created) {
-                    observer.observe(created);
+                    this.observer.observe(created);
                 }
                 index++;
             }
@@ -399,6 +400,7 @@ export default class GLightbox {
     public destroy(): void {
         this.close();
         this.clearAllEvents(true);
+        this.observer.disconnect();
     }
 
     public reload(): void {