Flicker of Unstyled Content (FOUC) with Gatsby

[lucasjohnston]

Description

I'm experiencing some rather unpleasant FOUC on loading our Progression Framework site (progression.monzo.com).

In past issues, it seems styled-components plugins were the issue, but it looks okay:

"styled-components": "^4.1.3",
"gatsby-plugin-styled-components": "^3.0.5",
"babel-plugin-styled-components": "^1.10.0"

Others also had this issue when touching the same API methods as the plugin does, but I'm not touching onCreateBabelConfig which is the only API method I can see. I'm also not using Material UI, Redux, or any other framework for this project.

(Apologies if I'm doing something obviously wrong or noobish here, this is my first real Gatsby project!)

Steps to reproduce

You can view the page here - progression.monzo.com And see the source code here - monzo/progression-framework

Expected result

The page loads beautifully ✨

Actual result

Images (including font-awesome logos) load first, followed by text around 2 seconds in. I've attached the Chrome Performance view to this too.

Environment

  System:
    OS: macOS 10.14.3
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.7.1 - /usr/local/bin/zsh
  Binaries:
    Node: 11.2.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 73.0.3683.75
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.19 => 2.0.53 
    gatsby-plugin-eslint: ^2.0.1 => 2.0.1 
    gatsby-plugin-flow: ^1.0.2 => 1.0.2 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.9 
    gatsby-plugin-nprogress: ^2.0.7 => 2.0.7 
    gatsby-plugin-react-helmet: ^3.0.5 => 3.0.5 
    gatsby-plugin-sharp: ^2.0.20 => 2.0.20 
    gatsby-plugin-styled-components: ^3.0.5 => 3.0.5 
    gatsby-remark-copy-linked-files: ^2.0.9 => 2.0.9 
    gatsby-remark-images: ^3.0.3 => 3.0.3 
    gatsby-source-filesystem: ^2.0.12 => 2.0.12 
    gatsby-transformer-remark: ^2.1.19 => 2.1.19 
    gatsby-transformer-sharp: ^2.1.13 => 2.1.13 
    gatsby-transformer-yaml: ^2.1.6 => 2.1.6 
  npmGlobalPackages:
    gatsby-cli: 2.4.8

[t2ca]

Have you tried using the size prop in the font awesome component to fix the github icon issue.

[lucasjohnston]

@t2ca I don’t believe so (I’ll have a look tomorrow though), but even if that were the case the illustration image and some parts of the css like the logo and shadows are being loaded first

[sidharthachatterjee]

Just did a preliminary check, this is what the page looks like without JavaScript. That explains the flicker (till the JavaScript loads). Cloning the source and taking a deeper look now.

[sidharthachatterjee]

Just took a look at the source and it seems that the sidebar is only made visible on componentDidMount. componentDidMount doesn't get called during SSR and hence the built site (using gatsby build) doesn't have the sidebar and looks like the image attached above. Once the JavaScript loads and componentDidMount is called (after mount) the sidebar is then rendered (isSidebarVisible is set to true)

This is what is causing the jank (please correct me if I am misunderstanding your question)

[lucasjohnston]

Ahh right - that makes a lot of sense. Thanks for looking into this @sidharthachatterjee 👍