AsyncBoundary

import { useState } from "react";
import { AsyncBoundary } from "mizu-ui";

export function Example() {
  const [state, setState] = useState<"ready" | "loading" | "empty" | "error">(
    "ready",
  );
  return (
    <>
      <select
        aria-label="Demo content state"
        value={state}
        onChange={(e) => setState(e.target.value as typeof state)}
      >
        {["ready", "loading", "empty", "error"].map((v) => (
          <option key={v}>{v}</option>
        ))}
      </select>
      <AsyncBoundary state={state} onRetry={() => setState("ready")}>
        <p>The archive is ready.</p>
      </AsyncBoundary>
    </>
  );
}