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 components before styled components styles #8

Open
SagarMahadik opened this issue Mar 3, 2023 · 6 comments
Open

Flash of components before styled components styles #8

SagarMahadik opened this issue Mar 3, 2023 · 6 comments

Comments

@SagarMahadik
Copy link

Hi first of all thank you for the workaround to use Styled Components with Remix. Can you help me understand what causes component to without styles flash, before the styled-components styles apply and how to avoid that.
@Xiphe
Copy link
Owner

Xiphe commented Mar 15, 2023

Sorry for the late reply.

Have you read the Pitfalls / Notes section of the readme?

maybe the discussion between @jozefmery and me can help you understand more? #2

Apart from that I'd need more details to understand your scenario.

@imballinst
Copy link

Maybe related, so I have some work related with Ant Design and Remix, so that definitely needs SSR. But, I'm also using Tailwind for the utility classes as well.

For some reasons, when I used only the Tailwind components, the stylings are consistent no matter how many times I refreshed the browser. However, with Ant Design components added, sometimes the browser "lost" the Tailwind styles for a glimpse (but the Ant Design stylings persist because it's added directly with the <style> tag during SSR).

After I tried to PoC it in this repository (https://github.com/imballinst/remix-antd-random-fouc-repro/tree/main/remix), I somewhat found out that this part is the thing that causes the glimpse of missing Tailwind styles, because the links are included inside the <!--remix-island-start--> kind of thing.

remix-island/src/index.ts

Line 68 in e601727

return `<!--${id}-start-->${head}<!--${id}-end-->`;

After I removed it, then I couldn't reproduce it anymore, each refresh result in both Tailwind and Ant Design stylings showing up consistently. Not sure if that's related, but I'm curious regardless. What was the original purpose of the remix-island-start and remix-island-end? @Xiphe

@Xiphe
Copy link
Owner

Xiphe commented Sep 7, 2023 •
edited

Hey @imballinst thanks for reaching out!

These comments are pretty essential to how remix-island is working. It might not be relevant for your app. But one of the great things with remix is that different routes can have different stuff in their <head>. (Think <title> or another good example for this is when you have a css file that's only relevant for one route you can configure it that it's only on the page when the route is active).

With remix-island, remix itself does no longer control the <head> directly. This lib does. When you remove the comments it might happen that when you enter the page on a route that has a special css that makes the background pink and then navigate away from it, the special css stays on the page, even though it would have been removed in classic remix.

Here is the part in the code that picks up on those comments: https://github.com/Xiphe/remix-island/blob/main/src/index.ts#L122

As to you tailwind problem.

Everything that does not need to be managed by remix should be placed before ${head} in entry.server.tsx.

As your tailwind stylesheet is most likely constant across the whole page try moving it out of remix and into the entry.server.tsx file that way it will be placed outside of the remix-island managed part of the head.

@imballinst
Copy link

With remix-island, remix itself does no longer control the directly. This lib does. When you remove the comments it might happen that when you enter the page on a route that has a special css that makes the background pink and then navigate away from it, the special css stays on the page, even though it would have been removed in classic remix.

As your tailwind stylesheet is most likely constant across the whole page try moving it out of remix and into the entry.server.tsx file that way it will be placed outside of the remix-island managed part of the head.

I see. That's very interesting insight, and I definitely skipped/forgot that part of the README! Thanks for the answer @Xiphe, I'll see what I can do with that information 🙇‍♂️

@dimik
Copy link

dimik commented Sep 21, 2023

@Xiphe Does it make sense to replace useEffect with useLayoutEffect to prevent FOUC?

@Xiphe
Copy link
Owner

Xiphe commented Sep 21, 2023

@dimik As mentioned earlier there shouldn't be a fouc when implemented correctly. If you experience it please share a repo that reproduces the issue.

The styles have to be on the page before hydration anyways so wether we use useLayoutEffect or useEffect shouldn't make a difference.

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
4 participants
@dimik @Xiphe @imballinst @SagarMahadik