From c0b42b82d040dece87c8f01c09a108b7f272c376 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 24 Apr 2025 23:40:45 +0200
Subject: [PATCH] fix: :bug: make end detection more robust

Smooth scrolling messes with the detection of isAtEnd. Introduce a debounce to delay updateActiveStates until scroll has actually finished.
---
 src/components/ref-gallery.webc | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/ref-gallery.webc b/src/components/ref-gallery.webc
index 7e139b4..e9999c2 100644
--- a/src/components/ref-gallery.webc
+++ b/src/components/ref-gallery.webc
@@ -8,6 +8,20 @@
 
   const TOLERANCE = 2;
 
+  const debounce = (fn, delay = 300) => {
+    let timer = 0;
+    const debounced = (...args) => {
+      if (!args) args = [];
+      clearTimeout(timer);
+
+      timer = setTimeout(() => {
+        fn.apply(fn, args);
+      }, delay);
+    };
+
+    return debounced;
+  };
+
   const isAtStart = () => Math.floor(track.scrollLeft) <= TOLERANCE;
   const isAtEnd = () => {
     const { scrollLeft, offsetWidth, scrollWidth } = track;
@@ -41,12 +55,7 @@
   const prev = () => scrollToIndex(currentIndex - 1);
   const next = () => scrollToIndex(currentIndex + 1);
 
-  const resizeObserver = new ResizeObserver(() => {
-    clearTimeout(resizeTimeout);
-    resizeTimeout = setTimeout(() => {
-      scrollToIndex(currentIndex);
-    }, 100);
-  });
+  const resizeObserver = new ResizeObserver(() => debounce(scrollToIndex(currentIndex)));
   resizeObserver.observe(track);
 
   const galleryObserver = new IntersectionObserver(
@@ -89,6 +98,7 @@
   images.forEach((el) => galleryObserver.observe(el));
   prevButton.addEventListener('click', prev);
   nextButton.addEventListener('click', next);
+  track.addEventListener('scroll', () => debounce(updateActiveStates(currentIndex)));
   document.addEventListener('DOMContentLoaded', () => initializeGallery());
 </script>