gaearon/test.html Secret

## test.html
<html>
  <body>
    <script src="../../../build/node_modules/react/umd/react.development.js"></script>
    <script src="../../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
    <div id="container"></div>
    <script type="text/babel">

      let content = {}
      let promises = {}
      let read = (id) => {
        if (content[id]) {
          return content[id]
        }
        if (promises[id]) {
          throw promises[id]
        }
        let promise = new Promise(resolve => {
          setTimeout(() => {
            content[id] = 'Text for ' + id
            resolve()
          }, 1000)
        })
        promises[id] = promise
        throw promise
      }

      function Tab({ index }) {
        return <h1>{read(index)}</h1>
      }

      function App() {
        const [index, setIndex] = React.useState(0)
        const [isLoading, setIsLoading] = React.useState(false)

        return (
          <div>
            <h1>App</h1>
            <button onClick={() => {
              setIsLoading(true)
              React.unstable_suspendIfNeeded(() => {
                setIsLoading(false)
                setIndex(index + 1)
              }, {timeoutMs: 5000})
            }}>next</button>
            <div style={{ color: isLoading ? 'grey' : 'black'}}>
              <React.Suspense fallback={<h2>loading...</h2>}>
                <Tab index={index} />
              </React.Suspense>
            </div>
          </div>
        )
      }

      ReactDOM.unstable_createRoot(
        document.getElementById('container')
      ).render(<App />);
    </script>
  </body>
</html>
	<html>
	<body>
	<script src="../../../build/node_modules/react/umd/react.development.js"></script>
	<script src="../../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
	<div id="container"></div>
	<script type="text/babel">

	let content = {}
	let promises = {}
	let read = (id) => {
	if (content[id]) {
	return content[id]
	}
	if (promises[id]) {
	throw promises[id]
	}
	let promise = new Promise(resolve => {
	setTimeout(() => {
	content[id] = 'Text for ' + id
	resolve()
	}, 1000)
	})
	promises[id] = promise
	throw promise
	}

	function Tab({ index }) {
	return <h1>{read(index)}</h1>
	}

	function App() {
	const [index, setIndex] = React.useState(0)
	const [isLoading, setIsLoading] = React.useState(false)

	return (
	<div>
	<h1>App</h1>
	<button onClick={() => {
	setIsLoading(true)
	React.unstable_suspendIfNeeded(() => {
	setIsLoading(false)
	setIndex(index + 1)
	}, {timeoutMs: 5000})
	}}>next</button>
	<div style={{ color: isLoading ? 'grey' : 'black'}}>
	<React.Suspense fallback={<h2>loading...</h2>}>
	<Tab index={index} />
	</React.Suspense>
	</div>
	</div>
	)
	}

	ReactDOM.unstable_createRoot(
	document.getElementById('container')
	).render(<App />);
	</script>
	</body>
	</html>