Blink of content

[nullhook]

I see a weird blink of unstyled content to styled content — I'm using styled-components to style and also have gatsby-plugin-styled-components in my config file.

I only see this issue in the build version of the site.

[KyleAMathews]

Can you create a site that reproduces this issue that we could look at?

[nullhook]

taherand.co - here you go

[DSchau]

@rehat101 I am pretty sure this is not an issue with Gatsby.

It's hard to debug without the original source code, but do you by chance have some type of animation you're applying on content? I see this in the element inspector on your PageWrapper component?

opacity: 1;
transform: matrix(1, 0, 0, 1, 0, 0);

if you simulate loading on a slow 3G connection and disable cache, you can see that component animate in. I believe it's this animation in that is causing the "blink" effect you're seeing.

Example

[merelinguist]

@rehat101 Does @DSchau’s comment help? If not, is there any way you could provide some reproduction code?

[nullhook]

My concern is more related to the unstyled content being loaded at first and styles being applied instantly causing flash/blink or whatever.

I do have a fade-in transition on componentDidMount() and I'm sure this isn't causing the unstyled content to be loaded

[merelinguist]

@rehat101 If the issue is with the styled-components plugin, could you provide your package.json and gatsby-config.js (or excerpts of them)?

[nullhook]

package.json

"dependencies": {
    "babel-plugin-styled-components": "^1.6.0",
    "gatsby": "^1.9.277",
    "gatsby-link": "^1.6.46",
    "gatsby-plugin-react-helmet": "^2.0.11",
    "gatsby-plugin-sharp": "^1.6.48",
    "gatsby-plugin-styled-components": "^2.0.11",
    "gatsby-remark-copy-linked-files": "^1.5.37",
    "gatsby-remark-images": "^1.5.67",
    "gatsby-source-filesystem": "^1.5.39",
    "gatsby-transformer-remark": "^1.7.44",
    "gsap": "^2.0.1",
    "react-helmet": "^5.2.0",
    "react-transition-group": "^2.4.0",
    "styled-components": "^3.4.5"
  },

gatsby-config.js

  plugins: [
    {
      resolve: 'gatsby-plugin-root-import',
      options: {
        src: `${__dirname}/src`
      }
    },
    {
        resolve: `gatsby-transformer-remark`,
        options: {
            plugins: [
                {
                    resolve: `gatsby-remark-images`,
                    options: {
                        linkImagesToOriginal: false,
                        maxWidth: 700
                    }
                }
            ],
        },
    },
    {
        resolve: `gatsby-source-filesystem`,
        options: {
            path: `${__dirname}/src/pages/posts`,
            name: "markdown-pages"
        },
    },
    `gatsby-plugin-sharp`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`
  ]

[nullhook]

@merelinguist I don't happen to see the flash anymore. I wonder why

[pieh]

In v2 we recently merged https://github.com/gatsbyjs/gatsby/pull/7912 which should fix this issue in case if any of you use gatsby v2 - please try to update gatsby-plugin-styled-components and check if it works

[nullhook]

The update fixed the problem, thanks!