{"action":"created","issue":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/5667","repository_url":"https://api.github.com/repos/gatsbyjs/gatsby","labels_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/5667/labels{/name}","comments_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/5667/comments","events_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/5667/events","html_url":"https://github.com/gatsbyjs/gatsby/issues/5667","id":328628808,"node_id":"MDU6SXNzdWUzMjg2Mjg4MDg=","number":5667,"title":"Flicker of Unstyled Content","user":{"login":"mbuttler","id":3672022,"node_id":"MDQ6VXNlcjM2NzIwMjI=","avatar_url":"https://avatars2.githubusercontent.com/u/3672022?v=4","gravatar_id":"","url":"https://api.github.com/users/mbuttler","html_url":"https://github.com/mbuttler","followers_url":"https://api.github.com/users/mbuttler/followers","following_url":"https://api.github.com/users/mbuttler/following{/other_user}","gists_url":"https://api.github.com/users/mbuttler/gists{/gist_id}","starred_url":"https://api.github.com/users/mbuttler/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mbuttler/subscriptions","organizations_url":"https://api.github.com/users/mbuttler/orgs","repos_url":"https://api.github.com/users/mbuttler/repos","events_url":"https://api.github.com/users/mbuttler/events{/privacy}","received_events_url":"https://api.github.com/users/mbuttler/received_events","type":"User","site_admin":false},"labels":[{"id":214544677,"node_id":"MDU6TGFiZWwyMTQ1NDQ2Nzc=","url":"https://api.github.com/repos/gatsbyjs/gatsby/labels/type:%20question%20or%20discussion","name":"type: question or discussion","color":"d4c5f9","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":21,"created_at":"2018-06-01T19:06:55Z","updated_at":"2018-11-20T10:21:34Z","closed_at":null,"author_association":"NONE","body":"## Summary\r\nI have a gnarly flash of unstyled content when I load my page from a `gatsby build`. I can replicate it in both brower-sync locally and with my AWS bucket that I use to host it on my company intranet.\r\n\r\n## Relevant information\r\nI am using Material UI V1 components. I tried [this plugin](https://github.com/porteta/gatsby-plugin-material-ui) that was suggested in [this thread](https://github.com/gatsbyjs/gatsby/issues/2049) but like... It doesn't solve my problem.\r\n\r\nGatsby Develop doesn't show the problem because of the way it builds, I guess.\r\n\r\n\r\nI had a look at my dev tools network tab and saw that `component-src-layouts` is loading slightly slower than my `component-src-page`, so the page content is loading before the layout or something?\r\n\r\n\r\nSo I'm thinking that  if I block `component-src-layouts`, I never get my CSS and it remains 'unstyled'... is there a way to load this component first? That might be the trick here.\r\n\r\n### Environment (if relevant)\r\n* Gatsby version 1.9.238\r\n* gatsby-cli version 1.1.45\r\n* Node.js version: 8.11.1\r\n* Operating System: MacOS High Sierra\r\n\r\n### File contents (if changed)\r\n`gatsby-config.js`: \r\n```\r\nmodule.exports = {\r\n    siteMetadata: {\r\n        title: 'My Site Title Here',\r\n    },\r\n    plugins: [\r\n        {\r\n            resolve: 'gatsby-plugin-typography',\r\n            options: { pathToConfigModule: './src/utils/typography.js' },\r\n        },\r\n        'gatsby-plugin-react-helmet',\r\n        {\r\n            resolve: 'gatsby-transformer-remark',\r\n            options: {\r\n                plugins: [\r\n                    'gatsby-remark-prismjs',\r\n                    'gatsby-remark-copy-linked-files',\r\n                    {\r\n                        resolve: 'gatsby-remark-images',\r\n                        options: {\r\n                            maxWidth: 800,\r\n                            linkImagesToOriginal: false,\r\n                        },\r\n                    },\r\n                ],\r\n            },\r\n        },\r\n        {\r\n            resolve: 'gatsby-source-filesystem',\r\n            options: {\r\n                path: `${__dirname}/src/docs`,\r\n                name: 'docs',\r\n            },\r\n        },\r\n    ],\r\n};\r\n```\r\n\r\n`package.json`: N/A\r\n\r\n`gatsby-node.js`: \r\n\r\n```\r\nrequire('dotenv').config({\r\n    path: `.env.${process.env.NODE_ENV}`,\r\n});\r\n\r\n// Static Site Markdown Helper\r\n\r\nconst path = require('path');\r\nexports.createPages = ({ boundActionCreators, graphql }) => {\r\n    const { createPage } = boundActionCreators;\r\n    const docTemplate = path.resolve('src/templates/docs-template.js');\r\n    return graphql(`\r\n        {\r\n            allMarkdownRemark(\r\n                sort: { order: DESC, fields: [frontmatter___title] }\r\n                limit: 1000\r\n            ) {\r\n                edges {\r\n                    node {\r\n                        excerpt(pruneLength: 250)\r\n                        html\r\n                        id\r\n                        frontmatter {\r\n                            path\r\n                            title\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    `).then(result => {\r\n        if (result.errors) {\r\n            return Promise.reject(result.errors);\r\n        }\r\n        result.data.allMarkdownRemark.edges.forEach(({ node }) => {\r\n            createPage({\r\n                path: node.frontmatter.path,\r\n                component: docTemplate,\r\n                context: {},\r\n            });\r\n        });\r\n    });\r\n};\r\n```\r\n\r\n`gatsby-browser.js`: N/A <!-- Please use a code block or just leave it as is if wasn't changed -->\r\n`gatsby-ssr.js`: N/A <!-- Please use a code block or just leave it as is if wasn't changed -->\r\n"},"comment":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/comments/440220993","html_url":"https://github.com/gatsbyjs/gatsby/issues/5667#issuecomment-440220993","issue_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/5667","id":440220993,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0MDIyMDk5Mw==","user":{"login":"Orlandohub","id":4696487,"node_id":"MDQ6VXNlcjQ2OTY0ODc=","avatar_url":"https://avatars0.githubusercontent.com/u/4696487?v=4","gravatar_id":"","url":"https://api.github.com/users/Orlandohub","html_url":"https://github.com/Orlandohub","followers_url":"https://api.github.com/users/Orlandohub/followers","following_url":"https://api.github.com/users/Orlandohub/following{/other_user}","gists_url":"https://api.github.com/users/Orlandohub/gists{/gist_id}","starred_url":"https://api.github.com/users/Orlandohub/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Orlandohub/subscriptions","organizations_url":"https://api.github.com/users/Orlandohub/orgs","repos_url":"https://api.github.com/users/Orlandohub/repos","events_url":"https://api.github.com/users/Orlandohub/events{/privacy}","received_events_url":"https://api.github.com/users/Orlandohub/received_events","type":"User","site_admin":false},"created_at":"2018-11-20T10:21:34Z","updated_at":"2018-11-20T10:21:34Z","author_association":"NONE","body":"@orshick Thanks for the details, I managed to solve the issue by changing the way I was implementing my code. @ljaniszewski you're right, it's not due to the fact of css not loading fast enough.\r\nIt was down to conditional rendering issues based on different states.\r\nI guess for now the key takeaway from all this is to really make sure your implementation it's clean and not trying to do unorthodox approaches."}}
{"actor":{"display_login":"Orlandohub"}}