#FOUC When moving in and out of ErrorBoundary

1 messages · Page 1 of 1 (latest)

wanton cargo
#

I have a situation where I get FOUC whenever the ErrorBoundary in my root is rendered or when I transition back to a working route. I believe this is because the styles are being remounted within the ErrorBoundary and with the stylesheet not currently being cached(will be resolved eventually), results in a short period where the browser has to download the stylesheet again and the content is presented unstyled.

I suspect this will be resolved once some cache headers are added to the stylesheet but I wanted to see if this is normal behaviour. I would have expected(hoped) that if the link tag loading the stylesheet hasn't changed, that react would not remove the element from the dom. Is this something that is just unavoidable or does it likely indicate i'm doing something wrong?

pallid lintel
#

The behavior you're seeing is not normal if your stylesheet link tags remain unchanged. Ensure your styles are cached, loaded globally, and not conditionally managed in a way that React would re-render them. This should help prevent FOUC and ensure a smoother visual transition.

wanton cargo
#

hmm yeah so my stylesheet tags shouldn't be changing, although I'm just importing a css file which is being included in the page by vite, and without controlling that code it's kinda hard to say for certain. Struggling to find ways to isolate the issue though. It only seems to occur when the production build is being run within wrangler. Not happening with a fresh boilerplate either.