search

Xiphe / remix-island

utils to render remix into a dom-node instead of the whole document
MIT License
131 stars 7 forks source link

Flash of components before styled components styles #8

Open SagarMahadik opened 1 year ago

SagarMahadik commented 1 year ago

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 commented 1 year ago

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? https://github.com/Xiphe/remix-island/issues/2

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

imballinst commented 7 months ago

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.

https://github.com/Xiphe/remix-island/blob/e6017278314a97fcd3fd4da715ecee6bc4e984ac/src/index.ts#L68

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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

Xiphe commented 7 months ago

@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.