use lazyImport for CodeEditor

GooeyAI · Jul 26, 2024 · 2538d46 · 2538d46
1 parent ef8b448
commit 2538d46
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/app/base.tsx b/app/base.tsx
@@ -18,7 +18,6 @@ import { useJsonFormInput } from "~/jsonFormInput";
 import { RenderedHTML } from "~/renderedHTML";
 import CountdownTimer from "./components/countdown";
 import { lazyImport } from "./lazyImports";
-import CodeEditor from "./components/CodeEditor";
 
 const { DataTable, DataTableRaw } = lazyImport(() => import("~/dataTable"));
 const { GooeyFileInput } = lazyImport(() => import("~/gooeyFileInput"));
@@ -27,6 +26,7 @@ const Plot = lazyImport(
   () => import("react-plotly.js").then((mod) => mod.default),
   // @ts-ignore
 ).default;
+const CodeEditor = lazyImport(() => import("./components/CodeEditor")).default;
 
 type TreeNode = {
   name: string;
@@ -276,8 +276,12 @@ function RenderedTreeNode({
     }
     case "code-editor": {
       return (
-        <CodeEditor props={props} state={state} onChange={onChange} />
+        // pre fill height to avoid ui jump
+        <div style={{ minHeight: props?.height + 100 + "px" }}>
+          <CodeEditor props={props} state={state} onChange={onChange} />
+        </div>
       )
+
     }
     case "input": {
       const className = `gui-input gui-input-${props.type}`;

diff --git a/app/components/CodeEditor.tsx b/app/components/CodeEditor.tsx
@@ -57,10 +57,7 @@ const CodeEditor = ({
   };
 
   return (
-    <div
-      className="mb-4 code-editor-wrapper position-relative"
-      style={{ minHeight: height + 80 + "px" }}
-    >
+    <div className="mb-4 code-editor-wrapper position-relative">
       {label && (
         <label>
           <RenderedMarkdown body={label} />