suspense for mutation?

note-suspense.jsx

import { useState, useTransition } from "react"

export function NoteScreen({ noteId }) {
  const [resource, setResource] = useState(() =>
    createResource(getNote(noteId)),
  )
  const note = resource.read()

  const [text, setText] = useState(note.text)
  const [pending, startTransition] = useTransition()

  const handleSubmit = () => {
    startTransition(() => {
      setResource(createResource(updateNote(noteId, { text })))
    })
  }

  return (
    <form onSubmit={preventDefault(handleSubmit)}>
      <textarea value={text} onChange={(e) => setText(e.target.value)} />
      {pending ? <p>Saving...</p> : <button type="submit">Save</button>}
    </form>
  )
}

signin-mutation.jsx

import { useState } from "react"
import { useMutation } from "react-query"
import { signIn } from "./auth"
import { preventDefault } from "./form-helpers"

export function SignIn() {
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")

  const mutation = useMutation(() => signIn(username, password), {
    onSuccess: () => history.push("/dashboard"),
  })

  return (
    <form onSubmit={preventDefault(mutation.mutate)}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Sign in</button>
      {mutation.isLoading && <LoadingSpinner />}
      {mutation.error && <ErrorMessage error={mutation.error} />}
    </form>
  )
}

signin-suspense.jsx

import { Suspense, useState, useTransition } from "react"
import { ErrorBoundary } from "react-error-boundary"
import { createResource } from "some-magic-suspense-library"
import { signIn } from "./auth"
import { preventDefault } from "./form-helpers"

export function SignInScreen() {
  return (
    <ErrorBoundary renderFallback={({ error }) => <SignInForm error={error} />}>
      <Suspense>
        <SignInForm />
      </Suspense>
    </ErrorBoundary>
  )
}

function SignInForm({ error }) {
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [pending, startTransition] = useTransition()
  const [resource, setResource] = useState()

  resource?.read()

  const handleSubmit = () => {
    startTransition(() => {
      const promise = signIn(username, password)
      setResource(createResource(promise))
      promise.then(() => history.push("/dashboard"))
    })
  }

  return (
    <form onSubmit={preventDefault(() => startTransition(handleSubmit))}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Sign in</button>
      {pending && <LoadingSpinner />}
      {error && <ErrorMessage error={error} />}
    </form>
  )
}