Reduce install network flake (facebook#27464)

## Summary

Avoids potentially flaky network calls leading to failures such as
https://app.circleci.com/pipelines/github/facebook/react/47096/workflows/b7966c1d-199c-4185-8d17-ac6485235c3a/jobs/727782.
Also makes install faster since we don't need the binary in CI
seemingly.

Electron itself is used to start the standalone binary.

## How did you test this change?

- [x] CI still passes without the binary downloaded. I'm just trusting
[their
docs](https://www.electronjs.org/docs/latest/tutorial/installation) here
that setting this actually ensures the binary isn't downloaded.

Author: eps1lon

.circleci/config.yml

@@ -53,6 +53,9 @@ commands:
             if [ $? -ne 0 ]; then
               yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
             fi
+          environment:
+          # If we start needing the Electron binary, please ensure the binary is cached in CI following https://www.electronjs.org/docs/latest/tutorial/installation
+            ELECTRON_SKIP_BINARY_DOWNLOAD: 1
       - save_cache:
           name: Save yarn cache
           key: v2-yarn_cache-{{ arch }}-{{ checksum "yarn.lock" }}

fixtures/concurrent/time-slicing/.gitignore

@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock

fixtures/concurrent/time-slicing/package.json

@@ -1,20 +1,30 @@
 {
   "name": "cpu-demo",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "glamor": "^2.20.40",
     "react": "0.0.0-experimental-269dd6ec5",
     "react-dom": "0.0.0-experimental-269dd6ec5",
-    "react-markdown": "^3.2.0",
-    "react-scripts": "^1.1.4",
-    "victory": "^0.25.6"
+    "react-scripts": "^5.0.1",
+    "victory": "^36.0.0"
   },
   "scripts": {
     "copy-source": "cp -r ../../../build/oss-experimental/* ./node_modules/",
     "dev": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

fixtures/concurrent/time-slicing/public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
+    <meta name="description" content="Shows use of sync, debounce, async computation in react">
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

fixtures/concurrent/time-slicing/src/App.jsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState, useTransition } from "react";
+
+import _map from "lodash/map";
+import _debounce from "lodash/debounce";
+
+import { Charts, Clock, Options } from "./components";
+
+import { getStreamData } from "./utils";
+import { OPTIONS, INITIAL_STATE, STRATEGY, QUESTION_MARK } from "./constants";
+
+import "./index.css";
+
+let _ignoreClick = null;
+
+const App = () => {
+  const [showDemo, setShowDemo] = useState(INITIAL_STATE.showDemo);
+  const [strategy, setStrategy] = useState(INITIAL_STATE.strategy);
+  const [value, setValue] = useState(INITIAL_STATE.value);
+  const [showClock, setShowClock] = useState(INITIAL_STATE.showClock);
+  const [isPending, startTransition] = useTransition();
+
+  useEffect(() => {
+    window.addEventListener("keydown", showClockEventHandler);
+    return () => {
+      window.removeEventListener("keydown", showClockEventHandler);
+    };
+  }, []);
+
+  const showClockEventHandler = (e) => {
+    if (e.key.toLowerCase() === QUESTION_MARK) {
+      e.preventDefault();
+      setShowClock((prev) => !prev);
+    }
+  };
+
+  const handleChartClick = (e) => {
+    if (showDemo) {
+      if (e.shiftKey) {
+        setShowDemo(false);
+      }
+      return;
+    }
+    if (strategy !== STRATEGY.ASYNC) {
+      setShowDemo((prev) => !prev);
+      return;
+    }
+    if (_ignoreClick) {
+      return;
+    }
+    _ignoreClick = true;
+
+    startTransition(() => {
+      setShowDemo(true);
+      _ignoreClick = false;
+    });
+  };
+
+  const handleChange = (e) => {
+    const val = e.target.value;
+    switch (strategy) {
+      case STRATEGY.SYNC:
+        setValue(val);
+        break;
+      case STRATEGY.DEBOUNCED:
+        debouncedHandleChange(val);
+        break;
+      case STRATEGY.ASYNC:
+        startTransition(() => {
+          setValue(val);
+        });
+        break;
+      default:
+        break;
+    }
+  };
+
+  const debouncedHandleChange = _debounce((val) => {
+    if (strategy === STRATEGY.DEBOUNCED) {
+      setValue(val);
+    }
+  }, 1000);
+
+  return (
+    <div className="container">
+      <div className="rendering">
+        {_map(OPTIONS, (option) => (
+          <Options
+            {...option}
+            key={option.strategy}
+            setStrategy={setStrategy}
+            currentStrategy={strategy}
+          />
+        ))}
+      </div>
+      <input
+        className={"input " + strategy}
+        id="input"
+        placeholder="longer input → more components and DOM nodes"
+        defaultValue={value}
+        onChange={handleChange}
+      />
+      <div className="demo" onClick={handleChartClick}>
+        {showDemo && (
+          <Charts data={getStreamData(value)} isPending={isPending} />
+        )}
+        {showClock && <Clock />}
+      </div>
+    </div>
+  );
+};
+
+export default App;