search

spences10 / ama

Ask me anything!
0 stars 1 forks source link

Funny issue with your global style gatsby tutorial #11

Closed BenColwell131 closed 4 years ago

BenColwell131 commented 4 years ago

Hey man,

first off - huuuuge fan of your tutorials, really solid stuff that goes above and beyond in those niche areas you just cant find anyone doing.

I followed your globally styling gatsby tutorial in a recent project and loved the workflow, but when I put the site online theres a strange bug. Its like by putting the theme & global style in the root wrapper it takes a split second to load, so the whole layout appears then re-renders almost immediately into its correct position.

Just wondering if you happened to have had this issue and knew of a fix? I've switched back to no rootwrapper and putting tags around every page and that works but I much prefer the cleanliness of the code your way.

spences10 commented 4 years ago

Hey man! Thanks for reaching out 🙏

So I'm going to take a guess (as there's no code example to look at 🙃), that you're using wrapRootElement?

There was a change in Gatsby a while back when to have the SSR render correctly you now need to use wrapPageElement for the nice no flash of unstyled content (FOUC)!

Take a look at the root-wrapper.js along with the gatsby-browser.js and gatsby-ssr.js files on my repo for scottspence.com that's how I've done it there and I don't think there any FOUC on there 😀

Hope that helps!

Good luck and thanks again for dropping by!! 🙏

vgarmes commented 3 years ago

I had the exact same issue and moving everything inside wrapRootElement to wrapPageElement fixed it! Thanks!