Don't include code in SSR generation of Playground endpoint (#1518)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1518

We allow arbitrary code in the query param, that static site generation doesn't know about. Current experience in production build is confusing, since you can see a flash of one set of code (playground default), quickly change to another. It is less confusing to have it go from blank to code showing.

Reviewed By: yungsters

Differential Revision: D52162928

fbshipit-source-id: fc7b51455682351a0616be8b9ecf557122d3a8db

website-next/src/components/Playground.module.css

@@ -101,6 +101,10 @@ html[data-theme='dark'] {
     height: unset;
   }
 
+  .playgroundEditor :global(.prism-code) {
+    min-height: 10em;
+  }
+
   .playgroundRow {
     flex-direction: column;
     padding-inline: 5px;

website-next/src/components/Playground.tsx

@@ -28,16 +28,8 @@ import type {StyleNode} from './YogaViewer';
 
 import styles from './Playground.module.css';
 
-const defaultCode = `
-<Layout config={{useWebDefaults: false}}>
-  <Node style={{width: 350, height: 350, padding: 20}}>
-    <Node style={{flex: 1}} />
-  </Node>
-</Layout>
-`.trim();
-
 export type Props = Readonly<{
-  code?: string;
+  code: string;
   height?: CSSProperties['height'];
   autoFocus?: boolean;
 }>;
@@ -46,7 +38,7 @@ export default function Playground({code, height, autoFocus}: Props) {
   const prismTheme = usePrismTheme();
   const editorScrollRef = useRef<HTMLDivElement>(null);
 
-  const [liveCode, setLiveCode] = useState(code ?? defaultCode);
+  const [liveCode, setLiveCode] = useState(code);
   const [hasCodeChanged, setHasCodeChanged] = useState(false);
   const [scrollbarWidth, setScrollbarWidth] = useState(0);
 

website-next/src/pages/playground.tsx

@@ -12,18 +12,44 @@ import lzString from 'lz-string';
 import Playground from '../components/Playground';
 
 import styles from './playground.module.css';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+const defaultCode = `
+<Layout config={{useWebDefaults: false}}>
+  <Node style={{width: 350, height: 350, padding: 20}}>
+    <Node style={{flex: 1}} />
+  </Node>
+</Layout>
+`.trim();
 
 export default function PlaygroundPage(): JSX.Element {
-  const params = new URLSearchParams(useLocation().search);
+  const code = useCodeFromQueryParam();
-  const codeParam = params.get('code');
-  const code = codeParam
-    ? lzString.decompressFromEncodedURIComponent(codeParam)
-    : undefined;
 
   return (
     // @ts-ignore missing prop for `wrapperClassName`
     <Layout wrapperClassName={styles.bg} title="Playground">
-      <Playground height="max(80vh, 600px)" code={code} autoFocus={true} />
+      <Playground
+        height="max(80vh, 600px)"
+        code={code}
+        autoFocus={true}
+        key={String(useIsBrowser())}
+      />
     </Layout>
   );
 }
+
+function useCodeFromQueryParam(): string {
+  const location = useLocation();
+
+  // We don't know the query param ahead of time when doing SSR, so just render
+  // blank to avoid the appearance of code changing.
+  if (!useIsBrowser()) {
+    return '';
+  }
+
+  const params = new URLSearchParams(location.search);
+  const codeParam = params.get('code');
+  return codeParam
+    ? lzString.decompressFromEncodedURIComponent(codeParam)
+    : defaultCode;
+}