From b1e7164c7e17a8221f0ca357d62f1b4cb0c62bcc Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Wed, 27 Jul 2022 22:37:46 +0400
Subject: [PATCH] delayed overlay and autorun spinner

---
 .../src/components/SquigglePlayground.tsx     | 28 ++++++++++---------
 .../components/src/components/ui/Toggle.tsx   | 13 +++++++--
 packages/components/tailwind.config.js        | 23 ++++++++++++++-
 3 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index 2477f22f..79cac032 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/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 ? (
diff --git a/packages/components/src/components/ui/Toggle.tsx b/packages/components/src/components/ui/Toggle.tsx
index 17ecc3f6..bbf9a5ee 100644
--- a/packages/components/src/components/ui/Toggle.tsx
+++ b/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>
diff --git a/packages/components/tailwind.config.js b/packages/components/tailwind.config.js
index f059a98e..b49e3366 100644
--- a/packages/components/tailwind.config.js
+++ b/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 },
+        },
+      },
+    },
   },
 };