gatsby: Post inline images not showing when using gatsby-source-wordpress with Framer Motion animation

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Hi there,

I have a new Gatsby site which sources page content from a Wordpress site via gatsby-source-wordpress.

It also uses Framer Motion to provide page transitions via the AnimatePresence component.

After updating Gatsby recently I have noticed that there is a bug arising with images in the page content. On the initial page load, or when pressing refresh, the images show as expected, however when a page is navigated to via another page (i.e. invoking the AnimatePresence animation, the images are not revealed.

Note 1: this only happens when the exitBeforeEntry prop is set on the AnimatePresence component (which is required

Note 2: this only occurs with images in the post content. If I display other images (e.g. the post’s featured image) using GatsbyImage, they load as expected in all situations.

Any help would be much appreciated. I’m at a loss with how to debug this issue. Thanks.

Reproduction Link

https://github.com/mrbjjackson/gatsby-source-wordpress-framer-motion-bug

Steps to Reproduce

I have created a minimal reproduction that demonstrates the problem.

Also - there is a live version of the site here

Essentially, this bug occurs when using Gatsby 4, gatsby-source-wordpress with Framer Motion. I have recently updated the site (from Gatsyb 2) and I’m 90% sure this bug was not occuring before I updated.

Expected Result

The post content images to display as usual.

Actual Result

Post images show on the initial page load. However if you navigate to the page from another page, they do not appear.

Environment

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 15.11.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 96.0.4664.55
    Firefox: 94.0.1
    Safari: 12.1.2
  npmPackages:
    gatsby: ^4.4.0-next.0 => 4.4.0-next.0 
    gatsby-plugin-image: ^2.3.0 => 2.3.0 
    gatsby-plugin-manifest: ^4.3.0 => 4.3.0 
    gatsby-plugin-react-helmet: ^5.3.0 => 5.3.0 
    gatsby-plugin-sharp: ^4.3.0 => 4.3.0 
    gatsby-plugin-sitemap: ^5.3.0 => 5.3.0 
    gatsby-source-wordpress: ^6.3.0 => 6.3.0 
    gatsby-transformer-sharp: ^4.3.0 => 4.3.0 
  npmGlobalPackages:
    gatsby-cli: 4.2.0

Config Flags

No response