From c2fc97844fbcff05353b77202ea4736d49d0d87a Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 12 Jul 2026 03:17:30 -0400
Subject: [PATCH] x

---
 apps/spa/src/components/ProductImageGallery.tsx | 4 ++++
 apps/website/src/components/ProductGallery.tsx  | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/apps/spa/src/components/ProductImageGallery.tsx b/apps/spa/src/components/ProductImageGallery.tsx
index bd322f5..ab9c3ef 100644
--- a/apps/spa/src/components/ProductImageGallery.tsx
+++ b/apps/spa/src/components/ProductImageGallery.tsx
@@ -11,18 +11,22 @@ interface ProductImageGalleryProps {
 export default function ProductImageGallery({ images, fallback, alt = 'Product Image', badgeText }: ProductImageGalleryProps) {
   const [currentIndex, setCurrentIndex] = useState(0)
   const scrollRef = useRef<HTMLDivElement>(null)
+  const isScrollingRef = useRef(false)
 
   const handleThumbnailClick = (idx: number) => {
     setCurrentIndex(idx)
     if (scrollRef.current) {
       const child = scrollRef.current.children[idx] as HTMLElement
       if (child) {
+        isScrollingRef.current = true
         scrollRef.current.scrollTo({ left: child.offsetLeft, behavior: 'smooth' })
+        setTimeout(() => { isScrollingRef.current = false }, 600)
       }
     }
   }
 
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    if (isScrollingRef.current) return
     const container = e.currentTarget
     const scrollLeft = container.scrollLeft
     const width = container.clientWidth
diff --git a/apps/website/src/components/ProductGallery.tsx b/apps/website/src/components/ProductGallery.tsx
index 428d32e..11d53d7 100644
--- a/apps/website/src/components/ProductGallery.tsx
+++ b/apps/website/src/components/ProductGallery.tsx
@@ -12,18 +12,22 @@ interface Props {
 export default function ProductGallery({ productName, categoryName, images }: Props) {
   const [activeIndex, setActiveIndex] = useState(0)
   const scrollRef = useRef<HTMLDivElement>(null)
+  const isScrollingRef = useRef(false)
 
   const handleThumbnailClick = (idx: number) => {
     setActiveIndex(idx)
     if (scrollRef.current) {
       const child = scrollRef.current.children[idx] as HTMLElement
       if (child) {
+        isScrollingRef.current = true
         scrollRef.current.scrollTo({ left: child.offsetLeft, behavior: 'smooth' })
+        setTimeout(() => { isScrollingRef.current = false }, 600)
       }
     }
   }
 
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    if (isScrollingRef.current) return
     const container = e.currentTarget
     const scrollLeft = container.scrollLeft
     const width = container.clientWidth