Flicker of Unstyled Content (FOUC) with Gatsby and Material UI

[cadamsdev]

Description

When I visit my deployed site (blog.chadalen.com) there's a flicker of unstyled content for a brief tick. This doesn't happen locally only when I use yarn run deploy

I know this is a duplicae of #5667 and #12644

but those two issues don't solve the issue for me. Hopefully this helps other people who are using material ui as well.

You can see this issue happening at blog.chadalen.com

Describe the issue that you're seeing.

Brief flicker of unstyled content

Steps to reproduce

You can clone my project that it appears on
https://github.com/chadalen/blog.git

use gatsby build and publish to github pages

or you can see it live at blog.chadalen.com

Expected result

Should not see unstyled content

Actual result

Unstyled content appears

Environment

Production, GitHub pages

Run gatsby info --clipboard in your project directory and paste the output here.

System:
OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
Shell: 5.0.3 - /bin/bash
Binaries:
Node: 10.15.2 - /usr/bin/node
Yarn: 1.16.0 - /usr/bin/yarn
npm: 5.8.0 - /usr/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 75.0.3770.90
Firefox: 67.0.3
npmPackages:
gatsby: ^2.10.0 => 2.10.0
gatsby-plugin-react-helmet: ^3.1.0 => 3.1.0
gatsby-source-filesystem: ^2.1.0 => 2.1.0
gatsby-transformer-remark: ^2.5.0 => 2.5.0
npmGlobalPackages:
gatsby-cli: 2.7.0

[freiksenet]

Hello @chadalen!

This is happening because styles are included on client-side, but aren't included in the SSR'ed version of the page. gatsby-plugin-material-ui handles SSR for Material UI, I wonder if you could try if that helps with that issue.

Thank you for using Gatsby! 💜 💪

[cadamsdev]

@freiksenet Ok thanks, I will try that when I get home :)

[cadamsdev]

@freiksenet It seems to still flicker. I followed this link https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/ and I also referenced https://github.com/mui-org/material-ui/tree/master/examples/gatsby any idea what I did wrong?

[sidharthachatterjee]

@chadalen I cloned your repository and did manage to reproduce this! It seems like styles are not being injected at build time like @freiksenet suggested above.

It looks like CSS in https://github.com/hupe1980/gatsby-plugin-material-ui/blob/08b3937d92bc1998e1f935565a070f4a72127393/gatsby-plugin-material-ui/src/gatsby-ssr.js#L43 is empty

Would you like to open an issue in https://github.com/hupe1980/gatsby-plugin-material-ui?

[cadamsdev]

@sidharthachatterjee Hey thanks for the info. :) Yes I will open an issue there.

[oliviertassinari]

Did you consider opening an issue on https://github.com/hupe1980/gatsby-plugin-material-ui?

[cadamsdev]

@oliviertassinari issue resolved at mui/material-ui#16390

Thanks guys :D