Hey,

I've been going through the latest Next.js changes and created a simple app with Next.js 13 App Router + Chakra UI. When I refresh the page:
- The screen flashes white for a second before showing the dark theme.
- The internationalization and font settings are also back to default for a blink of an eye before applying the saved preferences.

That's called FOUC (flash of unstyled content). How do you guys deal with it? I'm aware that this happens because the Chakra UI stylesheets from <ChakraProvider />{:tsx} are not loaded server-side but only client-side.

  ...
  "dependencies": {
    "@chakra-ui/icons": "^2.1.1",
    "@chakra-ui/next-js": "^2.1.5",
    "@chakra-ui/react": "^2.8.1",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "framer-motion": "^10.16.4",
    "next": "14.0.0",
    "next-intl": "^2.21.0",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.0.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.1",
    "prettier": "^3.0.3",
    "typescript": "^5"
  }
}