React-id-swiper: "react-id-swiper" and Gatsby (small problem)

[ositaka]

Hello, I just read on the npm site that "react-id-swiper" doesn't work so well with Gatsby.,,

I've been making a website and I would really like to use this component. Long story short, gatsby has an IntersectionObserver and probably this is what causes the react-id-swiper to don't work at 100% with the duplicated slides.

In my case, everything works very well, but I just get an issue with Gatsby ImageSharp plugin, on the duplicated slides. As they are "off" from the IntersectionObserver, the images stay blured and, only after the duplicated slide it becomes the active-slide, the image then becomes "normal".

I have here a codesandbox demo: https://codesandbox.io/s/github/ositaka/david-netlify-stories-last/tree/master/ (the 2nd slider is easier to spot the problem).

I've opened a conversation on gatsby's spectrum chat: https://spectrum.chat/gatsby-js/general/i-am-having-trouble-with-imagesharp-plugin-when-used-in-react-id-swiper~6785e7ad-47f5-4371-a358-5297157816c5 and here, Jeremy Allbright gave this piece of advice/code fix (facing the blur problem):

"A very hacky workaround was to disable the blur in your PreviewCompatibleImage:"

<Img style={imageStyle} fluid={image.childImageSharp.fluid} alt={alt} loading='eager'
    imgStyle={{
        opacity: 1,
    }}
    placeholderStyle={{
        opacity: 0
    }}
/>

[juliocabify100]

NIIIIIICE bro!

[theskillwithin]

I found i needed this when i did loop: true for some reason.

I hope to find a less hacky fix later because this is breaking the gatsby image lazy load, which is a bigger deal on site im working on.

[theskillwithin]

I see no way to properly fix this here and make more "gatsby friendly"

this is of course using Swiper lib behind the scenes so perhaps would need to contribute to Swiper first to get desired result

[theskillwithin]

Swiper now directly supports react. using that fixes this problem https://github.com/nolimits4web/swiper/blob/master/SWIPER-REACT.md