Seeing some major FOUC with Solid-Start / Vite setup #1259
Replies: 3 comments 4 replies
-
|
Hi @caseybaggz we'd need a minimal reproduction to be able to confirm and debug this. |
Beta Was this translation helpful? Give feedback.
-
|
This looks like an issue with either the SSR setup of solid start + Vite. We'll need a repro or preview link to inspect this further. |
Beta Was this translation helpful? Give feedback.
-
|
Hang tight! Let me get something up and running for you! Thanks for the help! |
Beta Was this translation helpful? Give feedback.
-
|
@anubra266 @segunadebayo I setup a repo but it works fine. However, a big difference with my project is that it is now huge with a fully custom Panda setup down to multi-theming, semantic tokens, multiple recipes...everything. Panda generates the code so I don't think that's the issue though. What I did notice yesterday is that Panda is still loading tons of Is there a private thread we can start somewhere (like Discord) where I can send you the URL to the prod site? It's not ready for public consumption yet, but I think it will help you see what is happening on the Panda side? Basically: Panda is using the JS files in production - not CSS. The only css being loaded despite using the |
Beta Was this translation helpful? Give feedback.
-
|
I also want to note that I didn't have this behavior when using Tailwind or UnoCSS which I was under the impression Panda was influenced by and should work similarly in production build of the app? |
Beta Was this translation helpful? Give feedback.
-
|
@caseybaggz My discord username is @anubra266. Please send a friend request, so I can access the site |
Beta Was this translation helpful? Give feedback.
-
|
Continuing over at solidjs/solid-start#1038 |
Beta Was this translation helpful? Give feedback.
-
Hello! I've officially migrated from Tailwind to Panda in my Solid-Start project and am now seeing some pretty gnarly FOUC (about 2 seconds) that never existed until I migrated. I've tried a few different scenarios, all of which still do not fix the issue in production so I'm wondering if there is something I'm missing on the Panda side?
Context:
Attempts
1. Using global css import = FOUC
When importing to
root.cssin theroot.tsxfile, results in FOUC2. Preloading root CSS = FOUC
When attempting to preload the styles with a
Link(basically Remix installation) also results in FOUC locally.🐛 There is a bug in the production version of this though from the Vite output not finding the root.css file - checking on how to fix that in the interim.
3. Binding styles via the module = FOUC
When trying to just bind the module/raw output via the
Stylecomponent, results in FOUCWould love to know how to fix this so I can promote my app publicly soon. 👀 Thanks ahead of time for any support!
Visual
FOUC.mp4
Beta Was this translation helpful? Give feedback.
All reactions