Merge pull request #26516 from ethereum/fix-flashing

[website] fix: colorMode flashing

docs/faq.md

@@ -98,4 +98,4 @@ Updating Geth to the latest version simply requires stopping the node, downloadi
 
 ## What is a preimage?
 
-Geth stores the Ethereum state in a [Patricia Merkle Trie](https://ethereum.org/en/developers/docs/data-structures-and-encoding/patricia-merkle-trie/#state-trie). It contains `(key,value)` pairs with account addresses as keys and and [RLP](https://ethereum.org/en/developers/docs/data-structures-and-encoding/rlp/#top) encoded `account` as the value, where an account is an array containing essential account information, specifically: `nonce`, `balance`, `StorageRoot` and `codeHash`. Definitions for these parameters are available in the Ethereum whitepaper. However, Geth's state trie does not use the keys directly, instead account information is indexed using the SHA3 hash of the key. This means that looking up the account information for an address can be done by traversing the trie for `sha3(address)`, but querying addresses that contain certain data is not possible - the addresses themselves are not part of the trie. This problem is solved using preimages - these are mappings of addresses to their hashes. Geth generates these preimages during block-by-block sync as information is added to the trie but they are deleted once they reach a certain age (128 blocks by default). To retain the preimages, Geth should be started with `--cache.preimages=true`.
+Geth stores the Ethereum state in a [Patricia Merkle Trie](https://ethereum.org/en/developers/docs/data-structures-and-encoding/patricia-merkle-trie/#state-trie). It contains `(key,value)` pairs with account addresses as keys and and [RLP](https://ethereum.org/en/developers/docs/data-structures-and-encoding/rlp/#top) encoded `account` as the value, where an account is an array containing essential account information, specifically: `nonce`, `balance`, `StorageRoot` and `codeHash`. Definitions for these parameters are available in the Ethereum whitepaper. However, Geth's state trie does not use the keys directly, instead account information is indexed using the SHA3 hash of the key. This means that looking up the account information for an address can be done by traversing the trie for `sha3(address)`, but querying addresses that contain certain data is not possible - the addresses themselves are not part of the trie. This problem is solved using preimages - these are mappings of addresses to their hashes. Geth generates these preimages during block-by-block sync as information is added to the trie but they are deleted once they reach a certain age (128 blocks by default). To retain the preimages, Geth should be started with `--cache.preimages=true`.

docs/interacting-with-geth/rpc/pubsub.md

@@ -80,7 +80,7 @@ In case of a chain reorganization the subscription will emit the last header in
 #### Example
 
 ```json
-{"id": 1, "method": "eth_subscribe", "params": ["newHeads"]}
+{ "id": 1, "method": "eth_subscribe", "params": ["newHeads"] }
 ```
 
 returns
@@ -128,7 +128,17 @@ In case of a chain reorganization previous sent logs that are on the old chain w
 #### Example
 
 ```json
-{"id": 1, "method": "eth_subscribe", "params": ["logs", {"address": "0x8320fe7702b96808f7bbc0d4a888ed1468216cfd", "topics": ["0xd78a0cb8bb633d06981248b816e7bd33c2a35a6089241d099fa519e361cab902"]}]}
+{
+  "id": 1,
+  "method": "eth_subscribe",
+  "params": [
+    "logs",
+    {
+      "address": "0x8320fe7702b96808f7bbc0d4a888ed1468216cfd",
+      "topics": ["0xd78a0cb8bb633d06981248b816e7bd33c2a35a6089241d099fa519e361cab902"]
+    }
+  ]
+}
 ```
 
 returns
@@ -152,7 +162,7 @@ none
 #### Example
 
 ```json
-{"id": 1, "method": "eth_subscribe", "params": ["newPendingTransactions"]}
+{ "id": 1, "method": "eth_subscribe", "params": ["newPendingTransactions"] }
 ```
 
 returns

src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { ChakraProvider } from '@chakra-ui/react';
+import { ChakraProvider, localStorageManager } from '@chakra-ui/react';
 import { AppProps } from 'next/app';
 import { useEffect } from 'react';
 import { init } from '@socialgouv/matomo-next';
@@ -20,7 +20,9 @@ export default function App({ Component, pageProps }: AppProps) {
   }, []);
 
   return (
-    <ChakraProvider theme={theme}>
+    // `colorModeManager` added to fix flashing issue
+    // See: https://chakra-ui.com/docs/styled-system/color-mode#add-colormodemanager-optional-for-ssr
+    <ChakraProvider theme={theme} colorModeManager={localStorageManager}>
       <Layout>
         <Component {...pageProps} />
       </Layout>

src/pages/_document.tsx

@@ -1,5 +1,8 @@
+import { ColorModeScript } from '@chakra-ui/react';
 import { Html, Head, Main, NextScript } from 'next/document';
 
+import theme from '../theme';
+
 export default function Document() {
   return (
     <Html lang='en'>
@@ -21,6 +24,7 @@ export default function Document() {
       </Head>
 
       <body>
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
         <Main />
         <NextScript />
       </body>