Gatsby Issue - on load and on refresh I am seeing a flicker of unstyled components

user_13512573 0
Viewed 1583

Issue - When I first load the page or I refresh the page, I get a flash of ugly un-styled features such as massive images, links go back to the custom styling of blue text with an underline, etc) before my own CSS applies.

Here is my package.json file -

{
  "name": "gatsby-starter-hello-world",
  "private": true,
  "description": "A simplified bare-bones starter for Gatsby",
  "version": "0.1.0",
  "license": "0BSD",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "babel-plugin-styled-components": "^1.12.0",
    "gatsby": "^2.26.1",
    "gatsby-image": "^2.7.0",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-manifest": "^2.9.0",
    "gatsby-plugin-mdx": "^1.5.0",
    "gatsby-plugin-sharp": "^2.9.1",
    "gatsby-plugin-styled-components": "^3.5.0",
    "gatsby-remark-images": "^3.6.0",
    "gatsby-source-filesystem": "^2.6.1",
    "gatsby-transformer-sharp": "^2.7.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0",
    "styled-components": "^5.2.1"
  },
  "devDependencies": {
    "prettier": "2.1.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

Here is my gatsby-config file -

module.exports = {
  siteMetadata: {
    title: "Gatsby Project",
    description: "",
    image: "/logo.png",
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages`,
      },
    },
    {
      resolve: `gatsby-plugin-styled-components`,
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: { maxWidth: 1200 },
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [`roboto-mono`, `muli\:400,400i,700,700i`],
        display: "swap",
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        icon: `src/images/logo.png`,
      },
    },
  ],
}

Am I missing a dependancy or is there a mistake in my config? Not sure..

Any suggestions would be much appreciated!

gatsby-plugin gatsby styling css
1 Answers

Usually, this kind of issue related to styled-components (known as FOUT, Flash of Unstyled Text) is solved by checking missing configurations but in your case, it seems that you have everything properly set in your gatsby-config.js and you have all packages installed.

One thing you can try is removing the gatsby-plugin-google-fonts since usually when dealing with font-face blocks the rendering while loading the JavaScript. According to https://github.com/typekit/webfontloader:

Using the Web Font Loader asynchronously avoids blocking your page while loading the JavaScript. Be aware that if the script is used asynchronously, the rest of the page might render before the Web Font Loader is loaded and executed, which can cause a Flash of Unstyled Text (FOUT).

If the issue is solved by removing this, you may need to find another way to add the fonts globally.

Credits: @LekoArts in this Spectrum topic

user_55853710
Related