From d190fdb27c600a298867aa72a9377828a064e2dd Mon Sep 17 00:00:00 2001
From: Nicholas Jorgenson <nicholas.jorgenson@protonmail.com>
Date: Tue, 29 Apr 2025 16:06:43 -0400
Subject: [PATCH] Fix lazy loading on the genre pages (#6799)

* Fix genre tab from sorting shows randomly

* Fix loading elements that have already been loaded

* Fix lazyLoader for show and movie genre tabs

* Reduce time window in which callback may be executed again
---
 .../lazyLoader/lazyLoaderIntersectionObserver.js          | 8 ++++----
 src/controllers/movies/moviegenres.js                     | 8 +++++++-
 src/controllers/shows/tvgenres.js                         | 8 +++++++-
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/lazyLoader/lazyLoaderIntersectionObserver.js b/src/components/lazyLoader/lazyLoaderIntersectionObserver.js
index 81378710f..8a3835d89 100644
--- a/src/components/lazyLoader/lazyLoaderIntersectionObserver.js
+++ b/src/components/lazyLoader/lazyLoaderIntersectionObserver.js
@@ -7,10 +7,10 @@ export class LazyLoader {
     createObserver() {
         const callback = this.options.callback;
 
-        const observer = new IntersectionObserver(
-            (entries) => {
+        const newObserver = new IntersectionObserver(
+            (entries, observer) => {
                 entries.forEach(entry => {
-                    callback(entry);
+                    callback(entry, observer);
                 });
             },
             {
@@ -18,7 +18,7 @@ export class LazyLoader {
                 threshold: 0
             });
 
-        this.observer = observer;
+        this.observer = newObserver;
     }
 
     addElements(elements) {
diff --git a/src/controllers/movies/moviegenres.js b/src/controllers/movies/moviegenres.js
index 9a45f59e0..b9fa8bc50 100644
--- a/src/controllers/movies/moviegenres.js
+++ b/src/controllers/movies/moviegenres.js
@@ -52,8 +52,14 @@ export default function (view, params, tabContent) {
         return !layoutManager.desktop;
     }
 
-    const fillItemsContainer = (entry) => {
+    const fillItemsContainer = (entry, observer) => {
+        if (!entry.isIntersecting) {
+            return;
+        }
+
         const elem = entry.target;
+        observer.unobserve(elem);
+
         const id = elem.getAttribute('data-id');
         const viewStyle = this.getCurrentViewStyle();
         let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
diff --git a/src/controllers/shows/tvgenres.js b/src/controllers/shows/tvgenres.js
index c1c360a83..6c5982627 100644
--- a/src/controllers/shows/tvgenres.js
+++ b/src/controllers/shows/tvgenres.js
@@ -52,8 +52,14 @@ export default function (view, params, tabContent) {
         return !layoutManager.desktop;
     }
 
-    function fillItemsContainer(entry) {
+    function fillItemsContainer(entry, observer) {
+        if (!entry.isIntersecting) {
+            return;
+        }
+
         const elem = entry.target;
+        observer.unobserve(elem);
+
         const id = elem.getAttribute('data-id');
         const viewStyle = self.getCurrentViewStyle();
         let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;