Gatsby: Gatsby v2 site flickering re-rendering with every menu click

[zanedev]

Hi we are experiencing a flicker/reload issue going on when clicking on the site navigation that uses gatsby link. I've been using Gatsby for a while on other sites and never had this happen. It's like the site is being reloaded/re-rendering on every menu click.

This is a new site using gatsby v2 and template is set up the gatsby v2 way so I don't think it's anything related to that.

We are using a root provider however and passing in a mobx store and I have a feeling it started after that.

wrap-with-provider.js

import React from 'react';
import { Provider } from 'mobx-react'
import RootStore from "./src/stores/index";

const rootStore = new RootStore();

// eslint-disable-next-line react/display-name,react/prop-types
export default({element})=><Provider order={rootStore.order} auth={rootStore.auth} ui={rootStore.ui} cart={rootStore.cart}>{element}</Provider>

gatsby-browser.js

import wrapWithProvider from './wrap-with-provider'
export const wrapRootElement = wrapWithProvider

How can I troubleshoot what is causing the re-render/flicker of the website?

We're using gatsby 2.6.13

[jonniebigodes]

@zanedev can you share a reproduction following these steps so that it can be looked at in more detail? Could be that is something related to mobx or a diferent thing alltogether.

[danielberndt]

Same issue here. Just upgraded to 2.13.52 and now seeing this message being fired for every navigation on production:

https://github.com/gatsbyjs/gatsby/blob/afb3485aa24ed9e380eaa4509e31ee86e8de3642/packages/gatsby/cache-dir/navigation.js#L113

[danielberndt]

Just noticed it happens on my old version using v2.10.5 as well. I probably never noticed that behaviour before. Here's the page. It's using the gatsby version above. And both Firefox and Chrome cause the reloading behaviour.

[danielberndt]

Okay, found the issue.
Old versions of page-data.json files were cached on the browser.
I assumed that only *.html files needed to be invalidated when pushing a new release as all other assets types seemed to have a hash.
But I didn't account for page-date.json files which need to be invalidated on every release as well as they don't contain a content-hash either.

[zanedev]

@danielberndt oh that makes sense so we just need to upgrade or do I need to do something manually to fix it?

[danielberndt]

For me, this hasn't been a gatsby issue but an issue of me mis-configuring caching headers on Cloudfront.
So in case your problem is of a similar nature, I would recommend to check your hosting setup!

[zanedev]

Ok it’s actually happening locally as well.. I’ll post an example if I can’t figure something out. Will run gatsby dev also to dig into it more and report back

[zanedev]

I have spent hours and tried everything, even stripping down the the most bare component of just a menu and it continues to re-render the menu/flashing the logo basically. I did notice that I get this error message [Violation] 'requestAnimationFrame' handler took 97ms every time I click on the navigation..

[zanedev]

Okay I finally figured this out it was due to using a styled components directly with an img tag in the menu for the logo. I changed it to use a div tag instead with a bg image and it fixed it. Apparently it's re-rendering every time as intended with the new layout components but for whatever reason when using Styled Components and an img tag it would take longer to load the image every time you switch navigation and flash it.

[zanedev]

Just wanted to update again in case someone else comes across this. The img tag fix mentioned above fixed the logo visibly flickering but there was still a menu flicker. I finally tracked it down to using font src paths in my global createGlobalStyle for styled components. Moving those font file loading references outside of the global style and layout fixed it for me. Lesson learned be careful loading fonts in styled components. This issue here sums it up https://github.com/styled-components/styled-components/issues/1593

[lbittner-pdftron]

For anyone else that runs into this issue - for me it was the PageSpeed module on my apache server caching old page-data files.

I resolved it by disabling PageSpeed: Modpagespeed Off

[rusyurchenko]

Tanks to @zanedev solution. My issue was also with styled-components and fonts loading inside createGlobalStyle. Moving out of this func resolved the flickering issue.

[evandromacedo]

Oh my god, thank you so much @zanedev! I can't believe it was a styled-components issue this whole time. I was kind of some weeks trying to figure this out and almost getting crazy.

[simonvomeyser]

Thanks @zanedev :)

The final solution for me was to create a "fonts.css" file and move it into the /static folder, along with the actual font files. https://www.gatsbyjs.org/docs/static-folder/

I used React Helmet (https://github.com/nfl/react-helmet) to simply add the stylesheet like this

<Helmet>
  <link rel="stylesheet" type="text/css" href="/fonts.css" />
</Helmet>

Maybe this solution is helpful, tried this one https://www.gatsbyjs.org/docs/global-css/#adding-global-styles-without-a-layout-component but it was not working.

best,
Simon vom Eyser

[hayyaun]

In my case, gatsby-plugin-minify was making this problem, which led the production build to reload all styles after a page was loaded completely in the production build.