delayed overlay and autorun spinner

packages/components/src/components/SquigglePlayground.tsx

@@ -188,10 +188,7 @@ const RunControls: React.FC<{
       )}
       <Toggle
         texts={["Autorun", "Paused"]}
-        icons={[
-          CheckCircleIcon, // note: we could replace this icon with RefreshIcon when spin is on, but that would cause blinking on each keystroke
-          PauseIcon,
-        ]}
+        icons={[CheckCircleIcon, PauseIcon]}
         status={autorunMode}
         onChange={onAutorunModeChange}
         spinIcon={isRunning}
@@ -280,15 +277,20 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
 
   const squiggleChart =
     renderedCode === "" ? null : (
-      <SquiggleChart
-        code={renderedCode}
-        executionId={executionId}
-        environment={env}
-        {...vars}
-        bindings={defaultBindings}
-        jsImports={imports}
-        enableLocalSettings={true}
-      />
+      <div className="relative">
+        {isRunning ? (
+          <div className="absolute inset-0 bg-white opacity-0 animate-semi-appear" />
+        ) : null}
+        <SquiggleChart
+          code={renderedCode}
+          executionId={executionId}
+          environment={env}
+          {...vars}
+          bindings={defaultBindings}
+          jsImports={imports}
+          enableLocalSettings={true}
+        />
+      </div>
     );
 
   const firstTab = vars.showEditor ? (

packages/components/src/components/ui/Toggle.tsx

@@ -1,3 +1,4 @@
+import { RefreshIcon } from "@heroicons/react/solid";
 import clsx from "clsx";
 import React from "react";
 
@@ -29,8 +30,16 @@ export const Toggle: React.FC<Props> = ({
       )}
       onClick={() => onChange(!status)}
     >
-      <div>
-        <CurrentIcon className={clsx("w-6 h-6", spinIcon && "animate-spin")} />
+      <div className="relative w-6 h-6" key={String(spinIcon)}>
+        <CurrentIcon
+          className={clsx(
+            "w-6 h-6 absolute opacity-100",
+            spinIcon && "animate-hide"
+          )}
+        />
+        {spinIcon && (
+          <RefreshIcon className="w-6 h-6 absolute opacity-0 animate-appear-and-spin" />
+        )}
       </div>
       <span>{status ? onText : offText}</span>
     </button>

packages/components/tailwind.config.js

@@ -5,6 +5,27 @@ module.exports = {
   },
   important: ".squiggle",
   theme: {
-    extend: {},
+    extend: {
+      animation: {
+        "appear-and-spin":
+          "spin 1s linear infinite, squiggle-appear 0.2s forwards",
+        "semi-appear": "squiggle-semi-appear 0.2s forwards",
+        hide: "squiggle-hide 0.2s forwards",
+      },
+      keyframes: {
+        "squiggle-appear": {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+        "squiggle-semi-appear": {
+          from: { opacity: 0 },
+          to: { opacity: 0.5 },
+        },
+        "squiggle-hide": {
+          from: { opacity: 1 },
+          to: { opacity: 0 },
+        },
+      },
+    },
   },
 };