-
Notifications
You must be signed in to change notification settings - Fork 113
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
Flash of unstyled Content when running via build and serve #215
Comments
Update: I noticed this only occurs in dark mode, and it does happen on the vercel site https://redocusaurus.vercel.app/examples/ when you switch, so it must be related to the theme. I'll check this out further |
Possibly related. After building my site ( I've tested this with:
Note that you won't experience the bug when running p.s. Thank you for your work @rohit-gohri 🙇♂️ |
Yes @mfaux this is exactly what I saw as well. Interestingly for me, light mode was not as problematic on this as dark mode. For the time being, I'm deployed using npm start and while it's not ideal, it works ok. Also in his vercel deployment, the problem only appears clearly in the dark mode setting, not light mode. Sorry been a bit busy on other things to get time to get back to this, but I'd welcome any ideas. |
The problem is definitely with the ServerStyles and hydration. I suspect when react hydrates it removes the server style and then computes fresh styles in js. If we can somehow persist the server styles (maybe remove them after react has hydrated?) then I think it would solve this issue |
@rohit-gohri thanks for the insight - does it use a completely separate model than the base docusaurus docs build, which doesn't have this issue? |
We render the styles component only on server - https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc/src/theme/Redoc/ServerStyles.tsx by modifying the webpack config only if it's a server build here - redocusaurus/packages/docusaurus-theme-redoc/src/index.ts Lines 31 to 38 in df43d74
On client it renders an empty div - https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc/src/theme/Redoc/Styles.tsx What I was trying to use do was use this approach - facebook/react#10923 (comment) and skip hydration for the styles component altogether but couldn't get it to work |
Got it - thanks a lot for the insight. Will definitely be interested to investigate further when I have a free moment. |
Turns out that is not the problem. Fixed the hyrdation issue in #223 but this issue is still there because all the class names change when client code loads |
That can be fixed by adding Can you try the release at https://redocusaurus-dcul1rve3-rohit-gohri.vercel.app/ to see if you can reproduce the issue? And if not then you can try this test release in your project to see if it fixes the issue
And then adding module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
plugins: ['babel-plugin-styled-components']
}; |
HI @rohit-gohri problem still exists - I'm happy to do a screen share if you'd like to discuss further. The problem on that link still does not happen in light mode, only in dark mode. I assume you're not able to reproduce this? |
I was using Firefox, there I could not reproduce. Checked in Chrome now, reproducible very easily. |
Awesome, thanks again for digging in! Strangely, I just tried on Firefox (on latest MacOS, v102.0.1), and I see the problem there as well (on your Vercel link) |
hey @rohit-gohri, any progress on this issue? |
Work around
|
@Snivio Thank you that's a great workaround! (tip for implementers, if your whole site is docusaurus you can get rid of those hasPath/isPath variables) For me just added |
@Snivio It'll be great if you can open a PR adding that plugin to redocusaurus. I think it can go directly to the theme - https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc/src/index.ts We can put it behind an option, it's a great workaround until this gets fixed |
A colleague came up with the following work around. If you're using
|
I got into this topic a little as we also stumbled across this. So what I could see is that this is a quite complex problem and there are two different problems:
I will elaborate more on issue 2. (Flicker): When So now there is the rendering of docusaurus website which is only once per buildtime and usually it is only for the light theme (since there is usually only one build). There is a smart logic of redocusaurus to provide the CSS for light AND dark theme into the HTML and the CSS classes are also prefixed with either Well, how can this be solved?
FWIW. I don't think there are any other options left, as styled components would work best with SSR but docusaurus is relying on SSG. |
@JPeer264 Thanks for the detailed deep dive on this! I have merged your PR. And it's out in v1.6.1. For the second part I don't think redoc would implement a solution for a downstream package, so I'll keep this issue still open. |
Another thing I think which is caused by this issue is that it makes it so the scrollYOffset redoc option isn't applied properly on a page reload. On the first page load it applies the offset correctly, but when I reload the page the offset disappears, so when I scroll down the page the search bar becomes hidden by the navbar. Adding @mfaux's CSS fix somehow fixed this problem for me. |
Hi,
First, thanks very mich @rohit-gohri for the excellent tool! Really helpful!!
Got a weird FOUC (flash of unstyled content) issue - we're using redocusaurus in a locally built instance.
I noticed that on the deployed site (https://redocusaurus.vercel.app/examples/) there's no problem, BUT if if I download the code and run the example locally:
yarn build && yarn serve
Then go to an API page, and refresh the page, it does something like this for a second, then the site resolves itself (I'm guessing due to late loading of css?). This is identical to what I'm seeing in my instance.
Another note here is if I run the app in 'dev mode' via
yarn start
there's no issue.(btw, if there's ideas on where to look but it's a bit complicated, I'm happy to help with a PR)
Any ideas?
The text was updated successfully, but these errors were encountered: