styled-components and gatsby-plugin-layout together causes weird behaviours

[marcneander]

Description

I've been sitting for a couple of hours now trying to wrap my head around this bug I'm experiencing. I'm using styled-components and gatsby-plugin-layout. In my Layout component I have my global styles where I load my fonts.

However when building and serving my gatsby app, my fonts and index page chunk is loaded twice. Causing a flicker.

Removing gatsby-plugin-layout solved the problem but I need it for routing animation and performance when using styled-components.

Downgrading styled-components to v3 prevents fonts for being loaded twice onload. But when hovering over "View Profile" button, fonts are loaded again and causes same flickering.

Seems to only happen on index route weirdly enough.

Steps to reproduce

Clone https://github.com/marcneander/marcneander.se
yarn install && yarn build && yarn serve

See my fonts and index chunk being loaded twice.

Environment

System:
    OS: macOS 10.14.1
    CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.10.0 - /usr/local/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 62.0
    Safari: 12.0.1
  npmPackages:
    gatsby: 2.0.18 => 2.0.18
    gatsby-plugin-layout: 1.0.3 => 1.0.3
    gatsby-plugin-offline: 2.0.5 => 2.0.5
    gatsby-plugin-react-helmet: 3.0.0 => 3.0.0
    gatsby-plugin-styled-components: ^3.0.0 => 3.0.0

[kakadiadarpan]

@marcneander I followed the steps that you provided. But couldn't find fonts or index page chunk loading twice. Please refer screenshots below:

Fonts:

JS:

I saw a flicker when the site is loaded, but that might be because of the fonts being loaded later.

[marcneander]

@kakadiadarpan Hmm, thats weird. I cleared node_modules, .cache and public dirs and reinstalled and rebuilt everything. Still get the same problems in both Firefox and Chrome.

Firefox:

Chrome:

Disabling javascript will prevent the problems I'm having so something is going on when the app is being hydrated. See screenshots from 6-01ff99c6b2bb09dc769a.js and onwards.

[marcneander]

#3067 seems like the same issue I'm having? Tried all possible solutions in that thread without any success

[kakadiadarpan]

@marcneander can you try clearing your browser cache and try?

[marcneander]

@kakadiadarpan It's not that. If you see screenshots I have "Disable cache" and you can see resources being fetched (not from cache)

[marcneander]

@kakadiadarpan You're serving my site with gatsby serve right? The issue I'm having is not present during gatsby develop

[marcneander]

Turns out that the Layout component rerenders on route changes even if I use gatsby-plugin-layout. That's probably why I'm getting this behaviour.

Any suggestions on how to add global styles with styled-components
v4 in Gatsby? My solution obviously don't work.

[gatsbot]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.

[rus-yurchenko]

The same issue here! gatsby-plugin-layout cause to rerender on each route change and observe some flickr behavior

[good3n]

+1 :(