Make the Ruby VM a singleton

Author: kddnewton

docs/index.css

@@ -16,3 +16,7 @@ textarea {
   height: 100%;
   width: 100%;
 }
+
+.loading {
+  color: #ccc;
+}

src/Tree.tsx

@@ -1,7 +1,18 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import createRuby, { Ruby } from "./createRuby";
 
+// Create a singleton since we don't actually want there to be multiple virtual
+// machines running even if there are multiple Tree components.
+let ruby: Ruby = {
+  prettyPrint(source) {
+    return "Loading...";
+  }
+};
+
+// Track a state that represents where the ruby constant is at any given time.
+let rubyState: "initial" | "creating" | "ready" = "initial";
+
 function prettyPrint(ruby: Ruby, value: string) {
   try {
     return ruby.prettyPrint(value);
@@ -17,23 +28,36 @@ type TreeProps = {
 };
 
 const Tree: React.FC<TreeProps> = ({ cols, value }) => {
-  const [ruby, setRuby] = useState<Ruby>(null);
-  const [output, setOutput] = useState<string>("");
+  const [output, setOutput] = useState<string>(() => prettyPrint(ruby, value));
 
   useEffect(() => {
-    createRuby().then((ruby) => {
-      setRuby(ruby);
-      setOutput(prettyPrint(ruby, value));
-    });
-  }, []);
-
-  useMemo(() => {
-    if (ruby) {
-      setOutput(prettyPrint(ruby, value));
+    switch (rubyState) {
+      case "initial":
+        rubyState = "creating";
+
+        createRuby().then((newRuby) => {
+          ruby = newRuby;
+          rubyState = "ready";
+          setOutput(prettyPrint(ruby, value));
+        });
+
+        break;
+      case "creating":
+        break;
+      case "ready":
+        setOutput(prettyPrint(ruby, value));
+        break;
     }
-  }, [ruby, value]);
-
-  return <textarea cols={cols} value={output} readOnly />;
+  }, [value]);
+
+  return (
+    <textarea
+      className={rubyState != "ready" ? "loading" : ""}
+      cols={cols}
+      value={output}
+      readOnly
+    />
+  );
 };
 
 export default Tree;

src/index.tsx

@@ -4,14 +4,22 @@ import { createRoot } from "react-dom/client";
 import Editor from "./Editor";
 const Tree = React.lazy(() => import("./Tree"));
 
+type TreeFallbackProps = {
+  cols: number
+};
+
+const TreeFallback: React.FC<TreeFallbackProps> = ({ cols }) => (
+  <textarea className="loading" cols={cols} readOnly>Loading...</textarea>
+);
+
 const App: React.FC = () => {
   const [source, setSource] = useState<string>("1 + 2");
   const cols = 80;
 
   return (
     <>
       <Editor cols={cols} value={source} onChange={setSource} />
-      <Suspense fallback={<textarea cols={cols} readOnly />}>
+      <Suspense fallback={<TreeFallback cols={cols} />}>
         <Tree cols={cols} value={source} />
       </Suspense>
     </>