having some issues with hoverZoom getting stuck

[slikkhero]

it gets stuck when cursor on the image before it loads
To Replicate:
click on any below products while keeping cursor where the main image will load
https://development.drdd61kqa5dg3.amplifyapp.com/top%20wear/polos/Beeglee/Brown-Tactical-Cargo-Pants/711969250574

below is my code:
i tried cleanup function but wasn't able to make it work

import Image from "next/image";
import { useZoomImageHover } from "@zoom-image/react";
import React, { useEffect, useRef, useState } from "react";

function WebImageCarousel({ images, thumbnails, original }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const zoomTargetRef = useRef<HTMLDivElement>(null);
  const thumbnailsRef = useRef<HTMLDivElement>(null);

  const { createZoomImage } = useZoomImageHover();
  const [currImage, setCurrImage] = useState(images?.[0]);
  const [originalImg, setOriginalImg] = useState(original?.[0]);

  useEffect(() => {
    setCurrImage(images?.[0]);
    setOriginalImg(images?.[0]);
  }, [images]);

  useEffect(() => {
    const zoomTarget = zoomTargetRef.current as HTMLDivElement;
    if (containerRef.current) {
      createZoomImage(containerRef.current, {
        zoomImageSource: originalImg,
        zoomTarget,
        customZoom: { width: 500, height: 650 },
        scale: 2,
        zoomLensClass: "bg-white bg-opacity-35",
      });
    }
  }, [originalImg, createZoomImage]);

  const scrollUp = () => {
    if (thumbnailsRef.current) {
      thumbnailsRef.current.scrollBy({ top: -100, behavior: "smooth" });
    }
  };

  const scrollDown = () => {
    if (thumbnailsRef.current) {
      thumbnailsRef.current.scrollBy({ top: 100, behavior: "smooth" });
    }
  };

  return (
    <div className="flex flex-row gap-x-4 justify-center items-start w-full scrollbar-hide">
      <div className="flex flex-col h-[680px] scrollbar-none ">
        <div ref={thumbnailsRef} className="flex flex-col h-full gap-3 overflow-y-auto">
          {thumbnails?.map((image, key) => (
            <Image
              width={96}
              height={120}
              key={key}
              src={image}
              alt={`Thumbnail ${key + 1}`}
              className="w-24 border object-cover object-top cursor-pointer hover:border-black transition-colors"
              onClick={() => {
                setCurrImage(images[key]);
                setOriginalImg(images[key]);
              }}
            />
          ))}
        </div>

        <div className="flex flex-row justify-end items-center space-x-4 mt-1">
          <img
            src={"/media/svg/blackDownArrow.svg"}
            className="w-7 rotate-180"
            onClick={scrollUp}
          />
          <img
            src={"/media/svg/blackDownArrow.svg"}
            className="w-7"
            onClick={scrollDown}
          />
        </div>
      </div>
      <div ref={containerRef} className="relative flex items-start cursor-crosshair">
        <img className="h-full w-full" alt="Current product image" src={currImage} />
        <div ref={zoomTargetRef} className="absolute top-0 left-full ml-4"></div>
      </div>
    </div>
  );
}

export default WebImageCarousel;

[willnguyen1312]

Hi there, sorry for my late response as I have been occupied at work. I think we can fix it by giving the image container's width and height as in this example. This will solve the issue and avoid jumping experience on initial load :)

[slikkhero]

didn't work, tried the exact container code with everything else as is, still got the same issue

[willnguyen1312]

Could you please give me the complete reproduction code instead - like a repo so I can provide a fix for you? Sorry, I can't justify based on your snippet above. I could prove on my end that since zoom image requires the container's dimension available upfront to work. Thanks :)

I noticed your snippet didn't give the container width and height as example has:

Your snippet:

<div ref={containerRef} className="relative flex items-start cursor-crosshair">

Example code:

<div ref={imageHoverContainerRef} className="... h-[300px] w-[200px] ...>