FOUC when using style tag with Gatsby Head API

[alexey0975]

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

When inserting the style tag via Gatsby Head there is a flash of unstyled content (content without style appears for a split second, after which styles are loaded). This effect occurs both when entering the site and when following internal links.

When using react-helmet there is no such effect.

Reproduction Link

https://github.com/alexey0975/Gatsby-Head-API-with-style-tag

Steps to Reproduce

1. Build the project and open the site
2. Click Second page

Expected Result

Opening the site and transitions between pages are smooth without style jumps

Actual Result

When opening the site and navigating through the pages there are flashes of unstyled content

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400H @ 2.70GHz
  Binaries:
    Node: 22.12.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.12.0
  Browsers:
    Edge: Chromium (133.0.3065.82)
  npmPackages:
    gatsby: ^5.14.1 => 5.14.1 
    gatsby-plugin-sass: ^6.14.0 => 6.14.0 
  npmGlobalPackages:
    gatsby-cli: 5.14.0

Config Flags

No response