Improved Squiggle Playground to not show spinner on load when autorun…

…=false
quantified-uncertainty · Mar 23, 2024 · b841081 · b841081
1 parent 62a5e01
commit b841081
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 27 deletions.
diff --git a/packages/components/src/components/SquigglePlayground/index.tsx b/packages/components/src/components/SquigglePlayground/index.tsx
@@ -163,32 +163,43 @@ export const SquigglePlayground: React.FC<SquigglePlaygroundProps> = (
     );
   };
 
-  const renderRight = () =>
-    simulation ? (
-      <ProjectContext.Provider
-        value={{ sourceId, onOpenExport: props.onOpenExport }}
-      >
-        <ViewerWithMenuBar
-          simulation={simulation}
-          // FIXME - this will cause viewer to be rendered twice on initial render
-          editor={leftPanelRef.current?.getEditor() ?? undefined}
-          playgroundSettings={settings}
-          ref={rightPanelRef}
-          useGlobalShortcuts={true}
-          xPadding={2}
-          randomizeSeed={() => {
-            randomizeSeed();
-            if (!autorunMode) {
-              runSimulation();
-            }
-          }}
-        />
-      </ProjectContext.Provider>
-    ) : (
-      <div className="grid place-items-center h-full">
-        <RefreshIcon className="animate-spin text-slate-400" size={24} />
-      </div>
-    );
+  const renderRight = () => {
+    if (simulation) {
+      return (
+        <ProjectContext.Provider
+          value={{ sourceId, onOpenExport: props.onOpenExport }}
+        >
+          <ViewerWithMenuBar
+            simulation={simulation}
+            // FIXME - this will cause viewer to be rendered twice on initial render
+            editor={leftPanelRef.current?.getEditor() ?? undefined}
+            playgroundSettings={settings}
+            ref={rightPanelRef}
+            useGlobalShortcuts={true}
+            xPadding={2}
+            randomizeSeed={() => {
+              randomizeSeed();
+              if (!autorunMode) {
+                runSimulation();
+              }
+            }}
+          />
+        </ProjectContext.Provider>
+      );
+    } else if (defaultAutorunMode === false) {
+      return (
+        <div className="grid place-items-center h-full">
+          <div className="text-gray-500 text-sm">{`Press the "Run" button (top left) to simulate`}</div>
+        </div>
+      );
+    } else {
+      return (
+        <div className="grid place-items-center h-full">
+          <RefreshIcon className="animate-spin text-slate-400" size={24} />
+        </div>
+      );
+    }
+  };
 
   return (
     <PlaygroundContext.Provider value={{ getLeftPanelElement }}>

diff --git a/packages/components/src/stories/SquigglePlayground.stories.tsx b/packages/components/src/stories/SquigglePlayground.stories.tsx
@@ -31,6 +31,16 @@ export const HeightAndScroll: Story = {
   },
 };
 
+export const AutorunFalse: Story = {
+  name: "Autorun=false",
+  args: {
+    autorunMode: false,
+    defaultCode:
+      "List.upTo(1,10) -> map({|i| i to i + 1})" + new Array(100).join("\n"),
+    height: 400,
+  },
+};
+
 export const Slow: Story = {
   name: "Slow Code",
   args: {

diff --git a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx
@@ -318,7 +318,7 @@ export const EditSquiggleSnippetModel: FC<Props> = ({
     typeof squiggle.components.SquigglePlayground
   >[0] = {
     defaultCode,
-    autorunMode: content.autorunMode || true,
+    autorunMode: content.autorunMode ?? true,
     sourceId: serializeSourceId({
       owner: model.owner.slug,
       slug: model.slug,