Spectrum flash of unstyled content (FOUC)

[cheema-corellian]

Has anybody noticed a flash of unstyled content (FOUC) with Spectrum React on page load? At first I thought I was doing something wrong, but then I was able to reproduce the issue in a brand new sandbox repo with just the Spectrum React button component and nothing else. With and without the Adobe Clean font. And then I noticed at least one person on YouTube talk about it as being a problem as well.

I can create a Stackblitz example if it is needed.

Has anybody else around here noticed it? Is there a solution or workaround for it?

In Next.js, it is very visible in dev builds and a little more subtle in production builds.

[snowystinger]

I'm not sure what we can do about it, we rely on media queries to determine light or dark mode. Those don't work until you're on the client. You could set the colorScheme on your provider on the server if you know ahead of time through a user setting, then you shouldn't have the issue. https://react-spectrum.adobe.com/react-spectrum/Provider.html#color-schemes

If I've missed the gist here, a stackblitz would definitely be helpful

[nicksergeant]

I've been noticing this as well, and it is pretty jarring -- both the flash of mobile scale on desktop, and of light mode on dark mode:

CleanShot.2025-04-25.at.08.48.23.mp4

Here is a very simple POC demonstrating the issue:

• Preview: https://nextjs-spectrum.vercel.app/
• Repo: https://github.com/nicksergeant/nextjs-spectrum/

I've been trying to figure out how to get around this issue for a while now and I'm stumped. I'm at the point now where I'm about to dive into the source of https://react-spectrum.adobe.com/react-spectrum/ itself because for some reason, the issue does not present at all:

CleanShot.2025-04-25.at.09.14.52.mp4