fix(live-codeblock): render static codeblock server-side (#5754)

Co-authored-by: slorber <lorber.sebastien@gmail.com>

packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js

@@ -10,14 +10,20 @@ import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useIsBrowser from '@docusaurus/useIsBrowser';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import usePrismTheme from '@theme/hooks/usePrismTheme';
 import styles from './styles.module.css';
+import useIsBrowser from '@docusaurus/core/lib/client/exports/useIsBrowser';
 
 function Header({children}) {
   return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
 }
 
+function LivePreviewLoader() {
+  // Is it worth improving/translating?
+  return <div>Loading...</div>;
+}
+
 function ResultWithHeader() {
   return (
     <>
@@ -28,14 +34,33 @@ function ResultWithHeader() {
           Result
         </Translate>
       </Header>
+      {/* https://github.com/facebook/docusaurus/issues/5747 */}
       <div className={styles.playgroundPreview}>
-        <LivePreview />
-        <LiveError />
+        <BrowserOnly fallback={<LivePreviewLoader />}>
+          {() => (
+            <>
+              <LivePreview />
+              <LiveError />
+            </>
+          )}
+        </BrowserOnly>
       </div>
     </>
   );
 }
 
+function ThemedLiveEditor() {
+  const isBrowser = useIsBrowser();
+  return (
+    <LiveEditor
+      // We force remount the editor on hydration,
+      // otherwise dark prism theme is not applied
+      key={isBrowser}
+      className={styles.playgroundEditor}
+    />
+  );
+}
+
 function EditorWithHeader() {
   return (
     <>
@@ -46,13 +71,12 @@ function EditorWithHeader() {
           Live Editor
         </Translate>
       </Header>
-      <LiveEditor className={styles.playgroundEditor} />
+      <ThemedLiveEditor />
     </>
   );
 }
 
 export default function Playground({children, transformCode, ...props}) {
-  const isBrowser = useIsBrowser();
   const {
     siteConfig: {
       themeConfig: {
@@ -65,8 +89,7 @@ export default function Playground({children, transformCode, ...props}) {
   return (
     <div className={styles.playgroundContainer}>
       <LiveProvider
-        key={isBrowser}
-        code={isBrowser ? children.replace(/\n$/, '') : ''}
+        code={children.replace(/\n$/, '')}
         transformCode={transformCode || ((code) => `${code};`)}
         theme={prismTheme}
         {...props}>