x

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

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