Customizing "slide" in render options causes icon loading to not appear

[parsagholipour]

This is the code:

render={{
          iconLoading: () => <Loading />,
          slide: ({
            slide,
            offset,
            rect,
          }: {
            slide: Slide;
            offset: number;
            rect: ContainerRect;
          }) => (
            <img
              alt={slide.alt}
              key={slide.key}
              src={slide.src}
              width={rect.width}
            />
          ),
        }}

Now the loading doesn't appear.

Edit: I also noticed dragging with mouse doesn't work anymore. I think there should be event handler properties that I spread in the img?

[igordanchenko]

This is expected behavior. Loading icon is rendered as part of the default image slide implementation. When you chose to render custom image slides, you are in control of implementing the whole UX including the loading icon.

Edit: I also noticed dragging with mouse doesn't work anymore. I think there should be event handler properties that I spread in the img?

Adding draggable={false} attribute should fix this.

[parsagholipour]

What about onclick event? Using onClick manually cause it to get called when sliding using mouse.

[igordanchenko]

Does this not happen with the built-in image slide implementation?

[parsagholipour]

No, built-in is fine.

[igordanchenko]

Please share a complete example and I’ll take a look.

[parsagholipour]

I temporarily fixed that using the code but I'll try to share an example

  const onMouseDown = () => {
    window.preventClick = false;
  };
  const onMouseUp = (m: any) => {
    if (!window.preventClick) {
      const index = slides.findIndex((s) => s.key === m.key);
      props.click({index});
    }
  };
  const onMouseMove = () => {
    window.preventClick = true;
  };