Links in header fail to load the correct CSS on initial page load

[AminEl-Bekry]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] 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

In my layout component, I have the header and footer components. Within the header component, I have a simple header with nav links at the top. On initial page load, the first link fails to load the correct CSS for a second or two, then the 2nd link fails to load the correct CSS for the links. (Links should be white with no text decoration and changes to pink on hover).

However, once you select a different page within the SPA, the CSS styles correctly work on the links. Once you reload the website again, the issue comes back.

website - qiwio.io

Reproduction Link

https://github.com/AminEl-Bekry/qiwio-website

Steps to Reproduce

1. Load website
2. At the top, in the header, you will see the 2nd link turn purple.
3. Navigate to different pages to see how the CSS corrects itself
4. Reload app to see the issue come back. ...

Expected Result

The expected result is all links in the head should be white on page load instead of purple.

Actual Result

In my layout component, I have the header and footer components. Within the header component, I have a simple header with nav links at the top. On initial page load, the first link fails to load the correct CSS for a second or two, then the 2nd link fails to load the correct CSS for the links. (Links should be white with no text decoration and changes to pink on hover).

However, once you select a different page within the SPA, the CSS styles correctly work on the links. Once you reload the website again, the issue comes back.

website - qiwio.io

Environment

System:
    OS: macOS 12.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 8.10.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 103.0.2
    Safari: 15.6
  npmPackages:
    gatsby: ^4.15.0 => 4.15.1
    gatsby-plugin-gatsby-cloud: ^4.15.0 => 4.15.0
    gatsby-plugin-google-gtag: ^4.15.0 => 4.15.0
    gatsby-plugin-image: ^2.15.0 => 2.15.0
    gatsby-plugin-manifest: ^4.15.0 => 4.15.0
    gatsby-plugin-react-helmet: ^5.15.0 => 5.15.0
    gatsby-plugin-sass: ^5.15.0 => 5.15.0
    gatsby-plugin-sharp: ^4.15.0 => 4.15.0
    gatsby-plugin-styled-components: ^5.15.0 => 5.15.0
    gatsby-source-cloudinary: ^0.1.14 => 0.1.14
    gatsby-source-filesystem: ^4.15.0 => 4.15.0
    gatsby-transformer-sharp: ^4.15.0 => 4.15.0
  npmGlobalPackages:
    gatsby-cli: 4.17.0

Config Flags

No response

[tyhopp]

Hi @AminEl-Bekry! Can you provide a minimal reproduction please? The url you linked as a reproduction 404s.

[AminEl-Bekry]

Hi @tyhopp,

Thanks for getting back to me. I have now made a minimum reproduction. https://github.com/AminEl-Bekry/gatsby-bug-repro

The issue only arises when the website is built and deployed (not in local host), so I deployed it via Netlify. https://extraordinary-bavarois-6fedf6.netlify.app/

In the webpage above, you can see on initial page load, the first link is blue, then it corrects itself after a second. However, on my actual website, it does not correct itself, the first link is purple, then after a second, the 2nd link is purple, then it only corrects itself once loading a new page, and comes back after you refresh the website. Link to actual site to experience issue is below.

https://qiwio.io/

Thanks for your help!

[AminEl-Bekry]

Hi TyHopp,

Any update? Would be very appreciated.

Thanks in advance :)

[github-actions[bot]]

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! 💪💜

[AminEl-Bekry]

Hello,

Are there any updates on solving this issue?

Really appreciate it, thanks

On Wed, Sep 28, 2022 at 2:10 AM github-actions[bot] < @.***> wrote:

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 https://www.gatsbyjs.com/contributing#how-to-contribute for more information about opening PRs, triaging issues, and contributing!

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

— Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/36440#issuecomment-1260203836, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASKKCMCHEVNGGYY2RUQ7QDDWAOEIVANCNFSM57HPFA3A . You are receiving this because you were mentioned.Message ID: @.***>

-- Amin El-Bekry Founder of Qiwio

+46 709 53 57 49 @.*** qiwio.io

Kristinebergsvägen 22 302 41 Halmstad Sweden

Making business communication more human with video.

http://www.qiwio.io/

[tyhopp]

Hi @AminEl-Bekry, I wasn't able to reproduce minimally using the using-styled-components example site and styling a Gatsby Link like:

const StyledLink = styled(Link)`
  color: red;
`

The reproduction you've linked has much more going on styling wise, my recommendation would be to reduce it to its most minimal state so its possible to eliminate more variables.

[LekoArts]

Hi!

Since we didn't receive an answer for 7 days or more about the ask of a reproduction I'm going to close this now, as we can't do much to help without a reproduction. If you are able to create a minimal reproduction for this then please do answer here or open a new issue with a reproduction. Thanks!