SOLVED: Weird image 'popin' before page renders

[JeffWScott]

Description

Images and icons are displayed really large on the screen before the page actually loads and renders everything correctly. Lasts half a second or so.

Steps to reproduce

Install fresh gatsby site
Load in some svg images or icons
Run "gatsby develop" or deploy and build on Netlify
Launch site.

Expected result

Site renders fine on first load

Actual result

Images and icons are displayed really large on the screen before the page actually loads and renders everything correctly. Lasts half a second or so.

Environment

System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i5-3550 CPU @ 3.30GHz
Binaries:
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 2.7.15
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.4.2 => 2.4.2
gatsby-image: ^2.0.41 => 2.0.41
gatsby-plugin-manifest: ^2.1.1 => 2.1.1
gatsby-plugin-offline: ^2.1.0 => 2.1.0
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
gatsby-plugin-sass: ^2.0.11 => 2.0.11
gatsby-plugin-sharp: ^2.0.36 => 2.0.36
gatsby-source-filesystem: ^2.0.33 => 2.0.33
gatsby-transformer-sharp: ^2.1.19 => 2.1.19

This is what the page looks like on inital load. This stays for a fraction of a second then the site renders fine.
I've made two sites with gatsby recently and both have this issue. One used react-strap and one used material-ui. Both had this problem.

I've googled it and came up with nothing. I can't possibly be the only one can I?

[DanielRuf]

Hi @jeanregisser,

this looks like a typical FOUC (flash of unstyled content) which can happen when CSS is loaded and rendered after the content.

How is your setup and how do you load the CSS files (in head, with JavaScript)?

[JeffWScott]

Hey thanks for the quick reply.

I use4 'gatsby-plugin-sass' in gatsby-config

Then import '../styles/main.scss'; in pages\index.js

[DanielRuf]

Does this also happen in production?

Probably related: #6211 but this should not happen in production mode where styles are normally inlined by Gatsby.

[JeffWScott]

By Production do you mean "gatsby build"? If so, yes it happens then as well. I minimized it by caching the images so that the popin only happens the first time the user loads the page.

[freiksenet]

Hi @JeffWScott!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[JeffWScott]

I did a brand new gatsby-site then installed material-ui and monaco editor.
really basic.
https://github.com/JeffWScott/gatsby-fouc

So I was wrong at what I said before. It does NOT happen on develop, only build.

Here is a deploy of the test site.
https://adoring-liskov-0b8439.netlify.com/

This is the popin I'm talking about. It's brief but it's there.

[JeffWScott]

looks like installing the material-ui gatsby plugin has fixed by problem.

https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/

I didn't even know it existed, just stumbled upon it.

This popin also happens with react-strap, they should make a plugin for that as well.

Thanks for all the feedback guys 👍

[JeffWScott]

I wanted to reopen this issue because while adding the matieral-ui plugin fixed that site, I have another site that uses react-strap and it still has the issue. I don't see a plugin to use for react-strap.

Any suggestions?

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 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. You can also add the label "not stale" to keep this issue open!

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

[sidharthachatterjee]

@JeffWScott So the "popin" behaviour your describe typically occurs because styles aren't SSRed. In case of material-ui, the plugin solved the issue for you.

In case of reactstrap, based on the documentation, it seems like you need to import the CSS file. Where are you importing this?

Import Bootstrap CSS in the src/index.js file:

import 'bootstrap/dist/css/bootstrap.css';

You will need to import this in gatsby-browser.js. That should fix it.

Closing this out for now. Feel free to reopen if there is anything else related to this that we can help with!

[JeffWScott]

Hey, thank you for the follow-up! I'll try that!

[JeffWScott]

@sidharthachatterjee

Thank you so much for your suggestion. Adding the bootstrap.css to my gatsby-browser.js fixed the issue!!

I hope this helps someone else as well!

[amalitsky]

looks like installing the material-ui gatsby plugin has fixed by problem.
https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/

Looks like it got broken recently. At least for me after updating to 4.0.3 version. Getting huge icons upon load once again.