Showing a pre rendering for a fraction of seconds

[ajmeraaxesh]

In the development phase, you see that the page shows a non styled layout for a fraction of seconds and then renders correctly.

Is there a reason to see something like this. This is even more obvious when using images

As an example, when using the Starter kit, if we just add the following in "header.js'

<img style={{height: '12px' }} src={gatsbyicon} alt="" />

the page shows a larger image first and then renders correctly

[vladar]

Hi @ajmeraaxesh

Sorry to hear you're running into an issue. I tried to reproduce this locally but couldn't. Can you provide a bit more information? What browser do you use? Maybe you can record a short video so that we could see the problem?

Also, 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! 💜

[ajmeraaxesh]

Attached file contains the recording the preview. You can understand what I am referring to

Screen Recording 2020-04-05 at 10.08.44 AM.zip

[ajmeraaxesh]

Also just for your reference. I am using tailwindcss for the recording I have attached. I am attaching a very minimal project and the link I have referred to.

Reference:
https://www.gatsbyjs.org/docs/tailwind-css/

In addition, Please see package.json, Header.js and tailwind.css as this is the only files I have made changes from default project that comes in-built

test-plain-gatsby.zip

[ajmeraaxesh]

Tried even steps in this article and followed the steps, still see a similar issue
https://dev.to/jakedohm_34/using-tailwind-with-gatsby-js-10fj

[github-actions]

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

[vladar]

It happens in develop only, right? If you build and run gatsby serve you shouldn't see this problem. And I think it is expected because of how style-loader works. See this for details: webpack-contrib/style-loader#107

This is happening in develop to enable support for hot reloading of styles with source maps. It shouldn't happen in the production build.

[vladar]

Thank you for opening this, @ajmeraaxesh !

There is an old standing issue about it: #6211, so closing this one as a duplicate.
We hope we managed to explain what's going on and thank you for using Gatsby! 💜