playground renders code on second pass

packages/components/src/components/SquiggleChart.tsx

@@ -88,6 +88,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
       environment,
       jsImports,
       onChange,
+      executionId,
     });
 
     const distributionPlotSettings = {

packages/components/src/components/SquigglePlayground.tsx

@@ -278,7 +278,8 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     executionId,
   } = useRunnerState(code);
 
-  const squiggleChart = (
+  const squiggleChart =
+    renderedCode === "" ? null : (
       <SquiggleChart
         code={renderedCode}
         executionId={executionId}

packages/components/src/lib/hooks/useRunnerState.ts

@@ -1,4 +1,4 @@
-import { useEffect, useReducer } from "react";
+import { useLayoutEffect, useReducer } from "react";
 
 type State = {
   autorunMode: boolean;
@@ -10,7 +10,7 @@ type State = {
 
 const buildInitialState = (code: string): State => ({
   autorunMode: true,
-  renderedCode: code,
+  renderedCode: "",
   runningState: "none",
   executionId: 1,
 });
@@ -62,9 +62,13 @@ const reducer = (state: State, action: Action): State => {
 export const useRunnerState = (code: string) => {
   const [state, dispatch] = useReducer(reducer, buildInitialState(code));
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (state.runningState === "prepared") {
+      // this is necessary for async playground loading - otherwise it executes the code synchronously on the initial load
+      // (it's surprising that this is necessary, but empirically it _is_ necessary, both with `useEffect` and `useLayoutEffect`)
+      setTimeout(() => {
         dispatch({ type: "RUN", code });
+      }, 0);
     } else if (state.runningState === "run") {
       dispatch({ type: "STOP_RUN" });
     }