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.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
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