x

apps/spa/src/components/ProductImageGallery.tsx

@@ -13,6 +13,23 @@ export default function ProductImageGallery({ images, fallback, alt = 'Product I
   const scrollRef = useRef<HTMLDivElement>(null)
   const isScrollingRef = useRef(false)
 
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const onScrollEnd = () => {
+      if (isScrollingRef.current) return
+      const width = el.clientWidth
+      if (width > 0) {
+        const newIndex = Math.round(el.scrollLeft / width)
+        if (newIndex >= 0 && newIndex < (images?.length || 0)) {
+          setCurrentIndex(newIndex)
+        }
+      }
+    }
+    el.addEventListener('scrollend', onScrollEnd)
+    return () => el.removeEventListener('scrollend', onScrollEnd)
+  }, [images?.length])
+
   const handleThumbnailClick = (idx: number) => {
     setCurrentIndex(idx)
     if (scrollRef.current) {
@@ -25,19 +42,6 @@ export default function ProductImageGallery({ images, fallback, alt = 'Product I
     }
   }
 
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    if (isScrollingRef.current) return
-    const container = e.currentTarget
-    const scrollLeft = container.scrollLeft
-    const width = container.clientWidth
-    if (width > 0) {
-      const newIndex = Math.round(scrollLeft / width)
-      if (newIndex !== currentIndex && newIndex >= 0 && newIndex < (images?.length || 0)) {
-        setCurrentIndex(newIndex)
-      }
-    }
-  }
-
   // Sort images by order if they exist, else just use the array
   const sortedImages = images?.length ? [...images].sort((a, b) => (a.order || 0) - (b.order || 0)) : []
   
@@ -89,7 +93,6 @@ export default function ProductImageGallery({ images, fallback, alt = 'Product I
       <div className="relative aspect-square w-full flex-1 overflow-hidden rounded-3xl bg-pop-bg shadow-sm border border-pop-black/10 flex items-center justify-center">
         <div 
           ref={scrollRef}
-          onScroll={handleScroll}
           className="flex w-full h-full overflow-x-auto snap-x snap-mandatory hide-scrollbar"
         >
           {sortedImages.map((img, idx) => (

apps/website/src/components/ProductGallery.tsx

@@ -14,6 +14,23 @@ export default function ProductGallery({ productName, categoryName, images }: Pr
   const scrollRef = useRef<HTMLDivElement>(null)
   const isScrollingRef = useRef(false)
 
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const onScrollEnd = () => {
+      if (isScrollingRef.current) return
+      const width = el.clientWidth
+      if (width > 0) {
+        const newIndex = Math.round(el.scrollLeft / width)
+        if (newIndex >= 0 && newIndex < images.length) {
+          setActiveIndex(newIndex)
+        }
+      }
+    }
+    el.addEventListener('scrollend', onScrollEnd)
+    return () => el.removeEventListener('scrollend', onScrollEnd)
+  }, [images.length])
+
   const handleThumbnailClick = (idx: number) => {
     setActiveIndex(idx)
     if (scrollRef.current) {
@@ -26,19 +43,6 @@ export default function ProductGallery({ productName, categoryName, images }: Pr
     }
   }
 
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    if (isScrollingRef.current) return
-    const container = e.currentTarget
-    const scrollLeft = container.scrollLeft
-    const width = container.clientWidth
-    if (width > 0) {
-      const newIndex = Math.round(scrollLeft / width)
-      if (newIndex !== activeIndex && newIndex >= 0 && newIndex < images.length) {
-        setActiveIndex(newIndex)
-      }
-    }
-  }
-
   if (images.length === 0) return null
 
   // If there's only one image, don't show thumbnails
@@ -89,7 +93,6 @@ export default function ProductGallery({ productName, categoryName, images }: Pr
       <div className="relative aspect-square w-full flex-1 overflow-hidden rounded-3xl bg-surface-card shadow-card">
         <div 
           ref={scrollRef}
-          onScroll={handleScroll}
           className="flex w-full h-full overflow-x-auto snap-x snap-mandatory hide-scrollbar"
         >
           {images.map((img, idx) => (