[NOT FOR MERGE] Full demo

package.json

@@ -10,7 +10,8 @@
     "d3-scale": "^1.0.4",
     "d3-selection": "^1.0.3",
     "react": "18.0.0-alpha-9212d994b",
-    "react-dom": "18.0.0-alpha-9212d994b"
+    "react-dom": "18.0.0-alpha-9212d994b",
+    "react-lag-radar": "^1.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,5 +1,6 @@
-import React, { useState } from "react";
+import React, { useState, useTransition } from "react";
 import logo from "./logo.svg";
+import LagRadar from "react-lag-radar";
 import "./App.css";
 
 import Pythagoras from "./Pythagoras";
@@ -20,8 +21,10 @@ function App() {
 
     const [treeLeanInput, setTreeLeanInput] = useState(0);
     const [treeLean, setTreeLean] = useState(0);
+    const [isLeaning, startLeaning] = useTransition()
 
     const [enableStartTransition, setEnableStartTransition] = useState(false);
+    const [enableSlowdown, setEnableSlowdown] = useState(false);
 
     function changeTreeSize(event) {
         const value = Number(event.target.value);
@@ -43,22 +46,26 @@ function App() {
 
         // update visuals
         if (enableStartTransition) {
-            React.startTransition(() => {
+            startLeaning(() => {
                 setTreeLean(value);
             });
         } else {
             setTreeLean(value);
         }
     }
 
-    function toggleStartTransition() {
-        setEnableStartTransition(!enableStartTransition);
+    function toggleStartTransition(event) {
+        setEnableStartTransition(event.target.checked);
+    }
+
+    function toggleSlowdown(event) {
+        setEnableSlowdown(event.target.checked);
     }
 
     return (
         <div className="App">
             <div className="App-header" style={{ marginBottom: "1rem" }}>
-                <img src={logo} className="App-logo" alt="logo" />
+                <LagRadar />
                 <h2>This is a leaning Pythagoras tree</h2>
             </div>
 
@@ -74,7 +81,7 @@ function App() {
                     <br />
                     <input
                         type="checkbox"
-                        selected={enableStartTransition}
+                        checked={enableStartTransition}
                         onChange={toggleStartTransition}
                     />
                 </div>
@@ -91,6 +98,15 @@ function App() {
                         style={{ width: svg.width / 3 }}
                     />
                 </div>
+                <div>
+                    <label>Make each square block the thread for 0.1ms</label>
+                    <br />
+                    <input
+                        type="checkbox"
+                        checked={enableSlowdown}
+                        onChange={toggleSlowdown}
+                    />
+                </div>
             </div>
 
             <div style={{ display: "flex", flexDirection: "row" }}>
@@ -119,9 +135,13 @@ function App() {
                 <svg
                     width={svg.width}
                     height={svg.height}
-                    style={{ border: "1px solid lightgray" }}
+                    className={isLeaning ? 'pending' : 'done'}
+                    style={{
+                        border: "1px solid lightgray",
+                    }}
                 >
                     <Pythagoras
+                        enableSlowdown={enableSlowdown}
                         w={baseWidth}
                         h={baseWidth}
                         heightFactor={heightFactor}

src/Pythagoras.js

@@ -44,11 +44,19 @@ const Pythagoras = React.memo(({
     right,
     lvl,
     maxlvl,
+    enableSlowdown,
 }) => {
     if (lvl >= maxlvl || w < 1) {
         return null;
     }
 
+    if (enableSlowdown) {
+        let now = performance.now();
+        while (performance.now() - now < 0.1) {
+            // do nothing
+        }
+    }
+
     const { nextRight, nextLeft, A, B } = memoizedCalc({
         w: w,
         heightFactor: heightFactor,
@@ -74,6 +82,7 @@ const Pythagoras = React.memo(({
             />
 
             <Pythagoras
+                enableSlowdown={enableSlowdown}
                 w={nextLeft}
                 x={0}
                 y={-nextLeft}
@@ -85,6 +94,7 @@ const Pythagoras = React.memo(({
             />
 
             <Pythagoras
+                enableSlowdown={enableSlowdown}
                 w={nextRight}
                 x={w - nextRight}
                 y={-nextRight}

src/index.css

@@ -3,3 +3,12 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+
+.pending {
+  opacity: 0.7;
+  transition: opacity 0.2s 0.4s linear;
+}
+.done {
+  opacity: 1;
+  transition: opacity 0 0 linear;
+}

yarn.lock

@@ -1234,6 +1234,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@gaearon/lag-radar@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@gaearon/lag-radar/-/lag-radar-0.1.0.tgz#b8de6daeb0318fd35b6ad74d5c891453153fd401"
+  integrity sha512-gRBjSuEG6HuyoXhy+yedPXlcGKyUNMlNpgKTncgfXwIi6ejt/0KuqOzck/geYqy8z02fuJrz1VjkF4EwH2Oq8g==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -9018,6 +9023,13 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-lag-radar@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-lag-radar/-/react-lag-radar-1.0.0.tgz#424b61d5e26016e85efa2c9fea01ae0157eb34fd"
+  integrity sha512-3Pv3B3PuMgFgnakXBrVGYPt0eOHQX+zwcImXSKI9CcF2RDw7VUImr5yb+F1hNl35niL7HSF1wAsMko6I4bO7LQ==
+  dependencies:
+    "@gaearon/lag-radar" "^0.1.0"
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"