suspense-demo.jsx

import React from 'react';
import Resource from '../Resource';

function timeout(ms) {
  return new Promise(resolve => {
    setTimeout(() => resolve(), ms);
  });
}

function fetchLoginAttempt() {
  const task = timeout(1000).then(() => {
    return {
      error: 'unknown username'
    };
  });

  return new Resource(task);
}

export default function SignUp() {
  const [loginResult, setLoginResult] = React.useState();
  const [startTransition, isPending] = React.useTransition({
    timeoutMs: 3000
  });

  const onSubmit = event => {
    event.preventDefault();
    startTransition(() => {
      setLoginResult(fetchLoginAttempt());
    });
  };

  const loginResult2 = loginResult?.read()?.error;

  return (
    <form onSubmit={onSubmit}>
      {loginResult2 && <h1>{loginResult2}</h1>}
      {isPending && <h1>Pending</h1>}

      <label>Username</label>
      <input type="text" name="username" />

      <label>Password</label>
      <input type="password" name="password" />

      <button type="submit" disabled={isPending}>
        Sign Up
      </button>
    </form>
  );
}