長い処理の待機画面ProgressDialogExperimental

"use client";

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

const STEPS = ["会議の前提を読み取っています", "発言を要点に分けています", "議事録の形に整えています"];
const SCENE = "/demos/progress-dialog/meeting-minutes.svg";
const SCENE_STILL = "/demos/progress-dialog/meeting-minutes-still.svg";

// 閉じたあとも、開いていたときの高さを保ちます
function useKeptHeight(container: HTMLElement | null, open: boolean) {
  const [height, setHeight] = React.useState<number>();
  React.useEffect(() => {
    if (!container || !open) return;
    const observer = new ResizeObserver(() => setHeight(container.offsetHeight));
    observer.observe(container);
    return () => observer.disconnect();
  }, [container, open]);
  return open ? undefined : height;
}

export function CreateMinutes() {
  const [container, setContainer] = React.useState<HTMLDivElement | null>(null);
  const [open, setOpen] = React.useState(false);
  const [step, setStep] = React.useState(0);
  const [result, setResult] = React.useState("");
  const timer = React.useRef<number | null>(null);
  const keptHeight = useKeptHeight(container, open);

  const stop = React.useCallback(() => {
    if (timer.current !== null) window.clearInterval(timer.current);
    timer.current = null;
  }, []);

  const start = React.useCallback(() => {
    stop();
    setStep(0);
    setResult("");
    setOpen(true);
    let current = 0;
    timer.current = window.setInterval(() => {
      current += 1;
      if (current >= STEPS.length) {
        stop();
        setOpen(false);
        setResult("議事録ができました。");
        return;
      }
      setStep(current);
    }, 2200);
  }, [stop]);

  React.useEffect(() => {
    start();
    return stop;
  }, [start, stop]);

  const cancel = () => {
    stop();
    setOpen(false);
    setResult("作成をやめました。入力内容は残っています。");
  };

  return (
    <div
      ref={setContainer}
      className="relative grid w-full place-items-center [&>*]:[grid-area:1/1]"
      style={{ minHeight: keptHeight }}
    >
      {open ? null : (
        <div className="flex flex-col items-center gap-4 text-center">
          <Button onClick={start}>もう一度作る</Button>
          <p className="text-sm text-muted-foreground" role="status">{result}</p>
        </div>
      )}
      <ProgressDialog
        portalContainer={container}
        variant="overlay"
        open={open}
        badge={<Badge variant="secondary">AIで作成中</Badge>}
        title="会議を議事録にまとめています"
        description="数十秒かかることがあります。この画面のままお待ちください。"
        media={
          <picture>
            <source media="(prefers-reduced-motion: reduce)" srcSet={SCENE_STILL} />
            <img src={SCENE} alt="" />
          </picture>
        }
        statusLabel="いまの作業"
        status={STEPS[step]}
        onCancel={cancel}
        cancelLabel="作成をやめる"
        cancelNote="やめても入力内容はこの画面に残ります。"
      />
    </div>
  );
}