Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flash of unstyled content on load #107

Closed
coryhouse opened this issue Feb 1, 2016 · 4 comments
Closed

Flash of unstyled content on load #107

coryhouse opened this issue Feb 1, 2016 · 4 comments

Comments

@coryhouse
Copy link

Since this loader stores styles in JavaScript and then uses JavaScript to inject the styles onto the page, there is a flash of unstyled content on page load. The styles aren't actually applied until the JavaScript is parsed and the styles are injected into the head.

This issue strikes me as inherent in the design, but is there a workaround for this?

To see this issue, use Chrome.
@tizmagik
Copy link

tizmagik commented Feb 1, 2016

You can use the ExtractTextPlugin() to extract your CSS into a .css stylesheet which you can reference in the page as you normally would any external stylesheet. Most of the React/Webpack startkits have this for production mode and use the JS-loaded styles in development mode for live/hot loading.

@coryhouse
Copy link
Author

Cool, that's exactly what I just did. :) Just making sure there wasn't another way to pull this off. Thanks for the quick reply!

@ghost
Copy link

ghost commented Jul 6, 2017 •
edited by ghost
Loading

i was curious to see if i could get it to work without using the ExtractTextPlugin..

first in the html or within some css that's not imported into a JS file add something like the following..

...
    <style>
        body.loading {
            visibility: hidden;
        }
    </style>
</head>
<body class="loading">
...

then inside the JS file that renders the app.. (it's a bit hacky but it works)

ReactDOM.render(
    <App/>,
    document.getElementById('app'),
    () => {
        window.setTimeout(() => {
            window.setTimeout(() => {
                document.body.classList.remove('loading');
            });
        });
    }
);

i don't know why it needs to wait 2 cycles of the event loop, 0 or 1 isn't enough here but that seems to do it

update: i noticed on Firefox just 1 timeout works, Chrome needs 2

@manvalls
Copy link

That flash is caused by the delay of loading the blob created on the fly to support source maps. Either disable sourcemaps for your css or add the singleton option to fix it.

@Mesoptier Mesoptier mentioned this issue Sep 28, 2018
Closed
@kepta kepta mentioned this issue Nov 17, 2018
Merged
@Littly Littly mentioned this issue Dec 26, 2018
Closed
@vladar vladar mentioned this issue Apr 27, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@tizmagik @coryhouse @manvalls