Merge pull request #26516 from ethereum/fix-flashing

[website] fix: colorMode flashing
2 years ago · b1ee28856a
parent 4fef432d62 8e88cfae52
commit b1ee28856a
4 changed files with 22 additions and 6 deletions
--- a/docs/interacting-with-geth/rpc/pubsub.md
+++ b/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
--- a/src/pages/_app.tsx
+++ b/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>
--- a/src/pages/_document.tsx
+++ b/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>