短い処理の表示ActionProgressExperimental

"use client";

import * as React from "react";
import { ActionProgress, Button } from "@gunjo/ui";

export function SaveSettings() {
  const [container, setContainer] = React.useState<HTMLDivElement | null>(null);
  const [pending, setPending] = React.useState(false);
  const [saved, setSaved] = React.useState(0);

  // 本物のアプリでは、保存の要求が終わったところで pending（open に渡す値）を false にします
  const save = (ms: number) => {
    if (pending) return;
    setPending(true);
    window.setTimeout(() => {
      setPending(false);
      setSaved((n) => n + 1);
    }, ms);
  };

  return (
    // 開いたときの高さ（実測 157px）を 4px の倍数に切り上げて取ります
    <div ref={setContainer} className="relative grid min-h-40 w-full place-items-center [&>*]:[grid-area:1/1]">
      <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap justify-center gap-2">
        <Button onClick={() => save(2000)}>保存する（2秒）</Button>
        <Button variant="outline" onClick={() => save(200)}>
          保存する（0.2秒）
        </Button>
      </div>
      <p className="text-sm text-muted-foreground" role="status">
        {pending ? "保存しています" : saved > 0 ? `保存しました（${saved} 回）` : ""}
      </p>
      </div>
      <ActionProgress
        portalContainer={container}
        open={pending}
        title="保存しています"
        description="終わるとこの画面に戻ります。"
      />
    </div>
  );
}