gatsby-react-router-scroll changes resulting in fail of gbi in Chrome

[timhagn]

Description

Two weeks ago I got a new bug-report in gatsby-background-image, #125. With the changes from PR #24306 gbi gets called again after its own IntersectionObserver kicks in when scrolling down, which results in its given image getting loaded again for normal & adaptive images, stacked images seem to work.
Only setting critical "rectifies" the repeated image loading, but that isn't a functional workaround in the long run.
And I guess in some cases this might happen for gatsby-image as well, but I didn't look into it.

The "offending line" in the compiled output is the initialization (number 34 in scroll-handler.js):

_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

I couldn't disable the behavior with a shouldUpdateScroll in a gatsby-browser.js, or should this even be possible like this?
The workarounds from other issues like setting "resolutions" to "gatsby-react-router-scroll": "3.0.0" didn't work either.

Or is there any other way to prevent the ScrollHandler from interrupting gbis flow (or a thing I might be able to change)?
Any help would be highly appreciated!

Steps to reproduce

Adding a placeholder div in front of a BackgroundImage component, putting it below the fold and kicking off the IntersectionObserver (like the OP in #125 did):

    <div style={{ height: 4000, display: 'block' }}></div>

Without setting critical on the BackgroundImage the image loads twice / trice.

I created a reproduction branch in gbitest, the demo repo of gbi, called scroll-handler-bug. The div was added here and the relevant component is BackgroundSection.

Expected result

Image gets loaded only once.

Actual result

The scroll event handler kicks in and forces BackgroundImage to rerender, which results in multiple image load events:

Environment

  System:
    OS: Linux 5.4 Linux Mint 20 (Ulyana)
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.8.0 - ~/.nvm/versions/node/v14.8.0/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.7 - ~/.nvm/versions/node/v14.8.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 79.0
  npmPackages:
    gatsby: ^2.24.47 => 2.24.47
    gatsby-background-image: ^1.1.2 => 1.1.2
    gatsby-image: ^2.4.16 => 2.4.16
    gatsby-plugin-manifest: ^2.4.23 => 2.4.23
    gatsby-plugin-offline: ^3.2.23 => 3.2.23
    gatsby-plugin-react-helmet: 3.3.10 => 3.3.10
    gatsby-plugin-sharp: ^2.6.27 => 2.6.27
    gatsby-plugin-styled-components: ^3.3.10 => 3.3.10
    gatsby-source-filesystem: ^2.3.24 => 2.3.24
    gatsby-transformer-sharp: ^2.5.13 => 2.5.13

I also tested it with node v12.18.0 with sadly the same result.
And I of course know gbi is no core component of gatsby, but any help would be greatly appreciated!

[timhagn]

Hi there,

any news on this one?

Best,

Tim.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[timhagn]

Still nothing : /?

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[not-authorized]

Hi there, any plans/updates on this issue?