-
Notifications
You must be signed in to change notification settings - Fork 660
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.
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
FOUC when loading CSS #291
Comments
Maybe a new prop like |
@doctyper Cool. Yeah it might not be a common use-case, but interested to see what you folks think. |
@cwelch5 Any thoughts? I can open a PR with a |
@jaysoo Hi, sorry for the delay. Just want to confirm some details and try to understand the issue, because we've had a FOUC in version 3.x and we tried to fix in 5.x. Is the Helmet example from above rendered in the root component of your app? If it is, then the Oh, and is this server-side rendered as well? Thanks for the info. |
@cwelch5 The example I provided is for FOUC on the root component. With SSR, this isn't an issue since the <style> is already in the . This is problem is purely for when SSR is off -- at least from what I can see. |
@jaysoo It sounds like |
@cwelch5 I agree, it would be better to have it configured per tag instead of the whole thing. I'll see if I can get a PR in today or tomorrow. Thanks! |
feat: Adds support for synchronously updated tags (Closes #291)
Scenario
Given the following element: (See https://github.com/jaysoo/example-react-helmet)
I know this is a contrived example, and not how you should be styling React apps. The real world example involves allowing user customization via custom CSS.
Expected
The element is rendered, and the user sees "Hello World!" in large, magenta text.
Actual
The user will see a flash of unstyled content (FOUC) before the
<style>
is inserted into<head>
. This seems to be caused by react-helmet v5's use ofrequestIdleCallback
, which forces the head tag insertion to happen after the rendered element has been updated in the DOM.Note: This does not happen with version 3.x.
Workaround
I don't see any obvious workarounds, unless something clever is done using
onChangeClientState
. Suggestions welcomed.The text was updated successfully, but these errors were encountered: