[ty] Fix caching of imported modules in playground (#21251)

playground/ty/src/Editor/SecondaryPanel.tsx

@@ -2,7 +2,7 @@ import MonacoEditor from "@monaco-editor/react";
 import { AstralButton, Theme } from "shared";
 import { ReadonlyFiles } from "../Playground";
 import { Suspense, use, useState } from "react";
-import { loadPyodide, PyodideInterface } from "pyodide";
+import { loadPyodide } from "pyodide";
 import classNames from "classnames";
 
 export enum SecondaryTool {
@@ -103,41 +103,12 @@ function Content({
   }
 }
 
-let pyodidePromise: Promise<PyodideInterface> | null = null;
-
 function Run({ files, theme }: { files: ReadonlyFiles; theme: Theme }) {
-  if (pyodidePromise == null) {
+  const [runOutput, setRunOutput] = useState<Promise<string> | null>(null);
-    pyodidePromise = loadPyodide();
+  const handleRun = () => {
-  }
+    const output = (async () => {
+      const pyodide = await loadPyodide();
 
-  return (
-    <Suspense
-      fallback={<div className="text-center dark:text-white">Loading</div>}
-    >
-      <RunWithPyiodide
-        theme={theme}
-        files={files}
-        pyodidePromise={pyodidePromise}
-      />
-    </Suspense>
-  );
-}
-
-function RunWithPyiodide({
-  files,
-  pyodidePromise,
-  theme,
-}: {
-  files: ReadonlyFiles;
-  theme: Theme;
-  pyodidePromise: Promise<PyodideInterface>;
-}) {
-  const pyodide = use(pyodidePromise);
-
-  const [output, setOutput] = useState<string | null>(null);
-
-  if (output == null) {
-    const handleRun = () => {
       let combined_output = "";
 
       const outputHandler = (output: string) => {
@@ -179,14 +150,18 @@ function RunWithPyiodide({
           filename: fileName,
         });
 
-        setOutput(combined_output);
+        return combined_output;
       } catch (e) {
-        setOutput(`Failed to run Python script: ${e}`);
+        return `Failed to run Python script: ${e}`;
       } finally {
         globals.destroy();
         dict.destroy();
       }
-    };
+    })();
+    setRunOutput(output);
+  };
+
+  if (runOutput == null) {
     return (
       <div className="flex flex-auto flex-col justify-center  items-center">
         <AstralButton
@@ -204,6 +179,25 @@ function RunWithPyiodide({
       </div>
     );
   }
+
+  return (
+    <Suspense
+      fallback={<div className="text-center dark:text-white">Loading</div>}
+    >
+      <RunOutput theme={theme} runOutput={runOutput} />
+    </Suspense>
+  );
+}
+
+function RunOutput({
+  runOutput,
+  theme,
+}: {
+  theme: Theme;
+  runOutput: Promise<string>;
+}) {
+  const output = use(runOutput);
+
   return (
     <pre
       className={classNames(