Flash of no theme (zero-config ThemeProvider, Next 14, not Cloudflare)

[jamesvclements]

I'm having some trouble debugging why I'm seeing a flash of no theme on oldfriends.studio. I see this only in production. Here's a video of the issue:

Old.Friends.Engineering.Studio-Friday-November-24-2023-10.28.48AM.mp4

You can see that there's a brief moment where the html tag has the theme injected, then it loses the attributes, then they kick back in. In that moment between, it flashes the white background, which is the default in CSS. It should use my system default of dark.

My providers.tsx:

The top of my root layout.tsx:

This site does allow the user to setTheme, but this is only called inside an onClick handler, so I don't think that should be effecting initial visits. I recorded the video when pulling up the site for the first time in an incognito window.

[1111mp]

When I use next-intl and nextui, switching languages causes flickering.

• "next-intl": "^3.1.4"
• "next-themes": "^0.2.1"

Screen.Recording.2023-11-28.at.01.36.47.mov

There is a chance that flickering will not occur.

when change language:

const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (
    event,
  ) => {
    const nextLocale = event.target.value;
    startTransition(() => {
      router.replace(pathname, { locale: nextLocale });
    });
  };

https://github.com/1111mp/next-temp-app This is the code repository.