React-slick: "autoPlay is triggered more than once" since v0.22.0

[krisbulman]

Since 0.22.0 (and latest 0.23.1), I am now getting autoPlay is triggered more than once repeatedly in the console. React 15.5.4.

  static defaultSliderProps = {
    arrows: true,
    autoplay: true,
    autoplaySpeed: 4000,
    dots: false,
    draggable: false,
    fade: true,
    infinite: true,
    lazyLoad: 'progressive',
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 1000,
    waitForAnimate: true,
  };

Reverting to 0.21.0 doesn't show this error.

Will try to replicate later on today in codesandbox.

[misterbridge]

Same issue here.
Due to lazyloading: image.onload triggers an update.
But the worst part is that is doesnt work: not yet loaded image do not pause the autoplay, so with a very bad connection, we might end up with scrolling slider of blank images.

[laveesingh]

It will be considered soon...Thanks.

[misterbridge]

Thanks @laveesingh .
Looking at your commit fe75098, I'd want to emphasis the sad part I mentionned, which is the rootcause of this issue: The lazy loading image.onload timer doesn't really works as it does not pause the autoplay. Hence a new play without a previous pause.

I had to do something like that in my implementation:

[...]
   afterChange: this.waitForImage,
[...]

  waitForImage = index => {
    if (!this.loadedImages.includes(index)) {
      this.slider.slickPause();
    }
  };

  loaded = index => {
    if (!this.loadedImages.includes(index)) {
      this.loadedImages.push(index);
      if (this.slider.innerSlider.state.autoplaying === 'paused') { // Didn't find how to know state else than that way
        this.slider.slickPlay();
      }
    }
  };

[...]
  {images.map((image, idx) => (
[...]
    <img [...]
      onLoad={() => {
        this.loaded(idx);
      }}
    />
[...]
  ))}
[...]

Will the final fix consider that too ?

[laveesingh]

I'll surely take a look at this.

[laveesingh]

It's been fixed and will be released with 0.23.0.

[krisbulman]

cc @fender