Help diagnosing gatsby-plugin-image issue using withArtDirection

[ardiewen]

Bug is related to

• [ ] embla-carousel (core package)
• [x] embla-carousel-react
• [ ] embla-carousel-autoplay
• [ ] embla-carousel-docs (documentation website)

Embla Carousel version

• v6.0.1

Describe the bug

• While I don't think this is an issue with Embla Carousel specifically, I would like to get a better understanding of what's potentially causing this so I can help report it to the gatsby team.
• When GatsbyImage component is used with the carousel, it works fine (images load when they enter the view port).
• When GatsbyImage is used withArtDirection with the carousel, the images load fine, but then "flicker" every time the carousel is dragged.
• The withArtDirection WITHOUT the carousel works fine, e.g. an overflow: scroll container with some of the images out of viewport

CodeSandbox

https://codesandbox.io/s/broken-butterfly-ltxgv

I first noticed this when testing React18 but also reproduced in React17. Here's a minimal repro on a react17 branch: https://github.com/ardiewen/gatsby-image-react18-repro/tree/react17

Steps to reproduce

1. Start the minimal repro in develop mode
2. Go to '/artdirected'
3. Scroll the images to see the behaviour

Expected behavior

• If you go to the artdirection.js and disable the ref and change the overflow to scroll, it behaves as it should (no flickering).

Additional context

• The "flickering" DOESN'T appear to be the entire component rerendering, as the placeholders aren't reset, it's almost like the component thinks that there's a media query change happening? perhaps related to the transform animation on drag?

[davidjerleke]

Hi @ardiewen,

I only had 2 minutes to do some debugging but I found this: It seems like the artDirection image is being re-rendered whenever you drag the carousel and release the pointer, but Embla is not being re-rendered. You can reproduce this like so:

1. Open up dev tools.
2. Toggle open the first slide element in order to reveal its contents.
3. Toggle open the <picture> element in order to show its contents.
4. Drag and release the carousel.
5. Watch the picture element being removed and added again.

Another thing: The console is throwing a couple of errors so these maybe worth investigating a bit:

At this point I have no idea why this is happening though.

Best, David

[ardiewen]

Hey @davidjerleke thanks for your prompt response! I managed to isolate the issue.

I first thought it had to do with the transform animation, but it looks like any re-render of the parent container will cause an art directed image to also rerender, even if it's been loaded.

This is not the case with the regular GatsbyImage. Rerendering parent containers will not cause a child GatsbyImage to rerender once its been loaded.

I'll create an issue on the gatsby repo.

[davidjerleke]

Hi @ardiewen,

Glad to hear that. Let’s hope that they will fix the issue soon. Good luck with everything 👍🏻.

Best, David