message: docs: load react-live-block with next/dynamic
diff: -import { Box } from "@chakra-ui/react"
  +import { Box, useBoolean } from "@chakra-ui/react"
  +import dynamic from "next/dynamic"
  import theme from "prism-react-renderer/themes/nightOwl"
  -import React from "react"
  +import React, { useEffect } from "react"
  import CodeContainer from "./code-container"
  import CopyButton from "./copy-button"
  import Highlight from "./highlight"
  -import ReactLiveBlock from "./react-live-block"
  +
  +const ReactLiveBlock = dynamic(() => import("./react-live-block"))
  function CodeBlock(props) {
  + const [isMounted, { on }] = useBoolean()
  + useEffect(
  + /**
  + * Lazily-load <ReactLiveBlock /> to save bundle size.
  + */
  + on,
  + [],
  + )
  const {
  className,
  live = true,
  @@ -30,11 +40,11 @@ function CodeBlock(props) {
  ...rest,
  }
  - if (language === "jsx" && live === true) {
  + if (isMounted && language === "jsx" && live === true) {
  return <ReactLiveBlock editable {...reactLiveBlockProps} />
  }
  - if (render) {
  + if (isMounted && render) {
  /**
  * @TODO Not sure if this is even used?
  */
  