Scenario
Given the following element: (See https://github.com/jaysoo/example-react-helmet)
<Helmet
style={[{
cssText: `
.message {
text-align: center;
font-size: 48px;
color: magenta;
}
`
}]}
/>
<p className="message">
Hello World!
</p>
</div>
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 of requestIdleCallback, 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.
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.