[gatsby-plugin-preact]: Query on Demand, loading indicator always active

[fcisio]

Description

With Preact as a plugin the Query on Demand loading indicator is always active and never disappears.

There's no error in the console

Steps to reproduce

1. Upgrade Gatsby to 2.30.2
2. Install gatsby-plugin-preact
3. yarn develop
4. Look for the loading indicator

Expected result

The indicator should show "whenever content is being requested upon navigation", then hide.

Actual result

The loader never disappears.

Environment

System:
OS: macOS 10.15.7
CPU: (4) x64 Intel(R) Core(TM) i5-4570 CPU @ 3.20GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.12.0 - /usr/local/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 6.14.8 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 87.0.4280.141
Firefox: 84.0.2
Safari: 14.0.2
npmPackages:
gatsby: ^2.26.1 => 2.30.2
gatsby-image: ^2.4.5 => 2.9.0
gatsby-link: ^2.4.13 => 2.9.0
gatsby-omni-font-loader: ^1.2.0 => 1.2.0
gatsby-plugin-emotion: ^4.3.11 => 4.5.0
gatsby-plugin-eslint: ^2.0.8 => 2.0.8
gatsby-plugin-layout: ^1.3.4 => 1.8.0
gatsby-plugin-manifest: ^2.4.9 => 2.10.0
gatsby-plugin-netlify-cache: ^1.2.0 => 1.2.0
gatsby-plugin-next-seo: ^1.6.1 => 1.6.1
gatsby-plugin-offline: ^3.2.9 => 3.8.0
gatsby-plugin-preact: ^4.0.3 => 4.5.0
gatsby-plugin-react-helmet-async: ^1.1.0 => 1.1.0
gatsby-plugin-sharp: ^2.6.9 => 2.12.1
gatsby-plugin-svgr-svgo: ^1.0.12 => 1.1.0
gatsby-plugin-theme-ui: ^0.4.0-rc.7 => 0.4.0-rc.7
gatsby-source-filesystem: ^2.3.8 => 2.9.0
gatsby-transformer-sharp: ^2.5.3 => 2.10.1

[MohamedDjoudir]

same problem

[cymkd]

same issue on gatsby@2.32.4

[yklcs]

Still a problem, has anyone figured out what the cause is?

Meanwhile, a workaround is to inject this line of JS globally (I used a useEffect in my global layout component):

document.querySelector("body > gatsby-portal").shadowRoot.querySelector("[data-gatsby-loading-indicator='root']").style.display = "none"

[kelvindecosta]

Nice!