Gatsby: Delay when loading CSS with Gatbsy

[Steffi3rd]

Description

When I load for the first time the gatbsy blog, I have a delay before CSS is loading. I think 300ms...
Whatever the browser is, it always do this.

It renders once before CSS is applied and 300ms after is rendered well.

Why?

Demo here

On page loading

After 300ms

Environment

  System:
    OS: macOS 10.14
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.12.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.24 => 2.0.43 
    gatsby-image: ^2.0.15 => 2.0.20 
    gatsby-plugin-lodash: ^3.0.1 => 3.0.2 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.8 
    gatsby-plugin-offline: ^2.0.6 => 2.0.13 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.1 
    gatsby-plugin-sharp: ^2.0.7 => 2.0.12 
    gatsby-plugin-sitemap: ^2.0.1 => 2.0.2 
    gatsby-source-prismic: ^2.0.0 => 2.1.0 
    gatsby-transformer-sharp: ^2.1.4 => 2.1.8 
  npmGlobalPackages:
    gatsby-cli: 2.4.5

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[kakadiadarpan]

@Steffi3rd is this during develop or after build when you are serving it?

[Steffi3rd]

It's on build.

On develop, I have a blank page very very fast before it renders well.

[kakadiadarpan]

@Steffi3rd can you provide us with a minimal reproduction repo for this issue?

[jonniebigodes]

@Steffi3rd if you can, provide a repo so that this issue can be further investigated and we can provide better assistance with this.

[aesthytik]

@steffi3rd if you are using a CSS library then it's better to put the cdn link in html.js. let us access to your repo for further assistance! 😁👍

[Steffi3rd]

@Steffi3rd if you are using a CSS library then it's better to put the cdn link in html.js. let us access to your repo for further assistance! 😁👍

I use Styled Component, is there a problem with this?

[Steffi3rd]

@Steffi3rd if you can, provide a repo so that this issue can be further investigated and we can provide better assistance with this.

@Steffi3rd if you can, provide a repo so that this issue can be further investigated and we can provide better assistance with this.

@Steffi3rd if you can, provide a repo so that this issue can be further investigated and we can provide better assistance with this.

The url is : https://edgebase.github.io/blog/

[jonniebigodes]

@Steffi3rd no...that's the url for the production build, the full blow website address...What i and other people before me asked is if you could provide a repo as in a github repository address, where you have your code hosted so that i and other people can check the code and see what is the issue and how we can assist you on resolving your issue. If you cannot provide that address because your code is otherwise private or protected by a company, provide us with an alternative, namely a dummy github url which replicates the exact issue you're experiencing with the library, so that me and other people like me can see what is the actual problem and aid you in fixing it

[KyleAMathews]

If you're using a css-in-js library, you need to install its corresponding gatsby plugin to ensure that the css for pages is extracted and added to the generated HTML as otherwise, css isn't added until after the JS loads which causes the delay you see.

See https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/?=styled

[Steffi3rd]

If you're using a css-in-js library, you need to install its corresponding gatsby plugin to ensure that the css for pages is extracted and added to the generated HTML as otherwise, css isn't added until after the JS loads which causes the delay you see.

See https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/?=styled

Yeaaaah ! I installed gatsby-plugin-styled-component ! It finally works! Thank you @KyleAMathews

Just found your answer on a another post : https://github.com/gatsbyjs/gatsby/issues/5366

[j10sanders]

I installed gatsby-plugin-styled-components but am still getting this issue. You can see the css getting moved on the homepage, where the articles all start center aligned. https://jonsjournal.com/

It does NOT happen on the local develop version.

Repo here: https://github.com/j10sanders/jonsjournal

Possibly also relevant -- I've noticed that setting localStorage is also not working on the deployed build version, but is working on the local develop one.

Any suggestions?
Thanks

[VictorBaudot]

Same problem, I also installed gatsby-plugin-styled-components but I still get the delay before the CSS being loaded...

[watch-janick]

I've got the same issue with styled-components and gatsby-plugin-styled-components.
Anyone found a fix for this one?

[paulgaumer]

+1, same issue here with the styled-components plugin correctly installed. Has anyone found a solution?

[sky172839465]

Repo: https://github.com/sky172839465/yusong.io

+1 same issue, in production Layout component render from wrapPageElement very slow,
I found a workaround from @alexanderwe 's solution, thanks!

[Antoshkiv]

I have same problem, installed gatsby-plugin-styled-components styled-components babel-plugin-styled-components
Any solution to the problem?

[elliotrpmorris]

Same problem here too!

[ismailmri]

I got the same problem. Has anyone found a solution?

[sky172839465]

Check this commit, using gatsby-plugin-layout instead of wrapPageElement can solve the problem.

https://github.com/sky172839465/yusong.io/commit/34f03eebc3be06ef1135db1895a098b63749a229

[hayyaun]

I have the same problem on most of my Gastby projects and not fixed yet...