Rendering behaviour of custom react components

[nicolas-actyx]

🐛 Bug Report

When visiting our documentation website https://developer.actyx.com/, the rendering behavior is quite strange (see below clips). The homepage contains custom react components that are then imported in index.js. When visiting the website or reloading it, the components are either rendered not at all with all of the text appearing first and then after a split second the components appear and sometimes one of the components is rendered huge, taking up almost the entire page and after a split second the page is rendered normally again.

Have you read the Contributing Guidelines on issues?

yes

To Reproduce

1. Go to https://developer.actyx.com/
2. Observe rendering behavior of elements on the page
3. Reload
4. Maybe disable cache and reload again

The page is rendered differently every time, some elements are rendered huge for a split second or not at all and appear at different times.

Expected behavior

The page should be rendered like any other website.

Actual Behavior

https://user-images.githubusercontent.com/23658611/107264007-b9a64700-6a42-11eb-9e0b-4d0b2521b3f1.mov
https://user-images.githubusercontent.com/23658611/107264027-bf9c2800-6a42-11eb-9d63-180a7bc375b8.mov

Your Environment

• Public source code: –
• Public site url: https://developer.actyx.com/
• Docusaurus version used: alpha 68
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Chrome Version 88.0.4324.150 (Official Build) (x86_64)
• Operating system and version (desktop or mobile): macOS Mojave 10.14.6 (18G8012)

Reproducible Demo

If possible, use https://new.docusaurus.io to create a CodeSandbox reproducible demo of the bug.

(Paste the link to an example repo, including a docusaurus.config.js, and exact instructions to reproduce the issue.)

[lex111]

Try setting the height and width for the hero.svg image, something like this (via style or width/height attributes):

[slorber]

Hi,

You are using Styled-Components on the homepage, and it is producing FOUC because we don't extract the critical CSS of your homepage during the SSR process, and the HTML files don't contain the required styles.
You can see the problem by simply disabling the JavaScript and loading your site.

Unfortunately, we don't support CSS-in-JS yet, and it would require some kind of docusaurus-plugin-styled-components for this to work.

I'd recommend using CSS modules in the meantime.

Closing in favor of #3236