diff --git a/playground/ty/src/Editor/SecondaryPanel.tsx b/playground/ty/src/Editor/SecondaryPanel.tsx index 7f68bb7153..a73cb57961 100644 --- a/playground/ty/src/Editor/SecondaryPanel.tsx +++ b/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 | null = null; - function Run({ files, theme }: { files: ReadonlyFiles; theme: Theme }) { - if (pyodidePromise == null) { - pyodidePromise = loadPyodide(); - } + const [runOutput, setRunOutput] = useState | null>(null); + const handleRun = () => { + const output = (async () => { + const pyodide = await loadPyodide(); - return ( - Loading} - > - - - ); -} - -function RunWithPyiodide({ - files, - pyodidePromise, - theme, -}: { - files: ReadonlyFiles; - theme: Theme; - pyodidePromise: Promise; -}) { - const pyodide = use(pyodidePromise); - - const [output, setOutput] = useState(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 (
); } + + return ( + Loading
} + > + + + ); +} + +function RunOutput({ + runOutput, + theme, +}: { + theme: Theme; + runOutput: Promise; +}) { + const output = use(runOutput); + return (