ErrorState

失敗したときの表示。

読み込みや処理が失敗したときの表示です。role="alert" が付き、destructive 系の色で囲まれます。

export const client = "only";

import { ErrorState, Button } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="w-[28rem]">
      <ErrorState
        title="売上を読み込めませんでした"
        message="upstream timeout after 30s"
        action={<Button variant="outline">再試行</Button>}
      />
    </div>
  );
}

import { ErrorState } from "@squadbase/vantage/ui";

3 つの状態をまとめて使う

クエリの状態をそのまま分岐に落とすのが基本形です。

import { useQuery, apiFetch } from "@squadbase/vantage/query";
import { Button, Loading, Empty, ErrorState } from "@squadbase/vantage/ui";
import { DataTablePreset } from "@squadbase/vantage/components";

export default function Customers() {
  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ["customers"],
    queryFn: () => apiFetch("/api/customers").then((r) => r.json()),
  });

  if (isLoading) return <Loading label="顧客を読み込んでいます…" />;
  if (error)
    return (
      <ErrorState
        message={error.message}
        action={<Button variant="outline" onClick={() => refetch()}>再試行</Button>}
      />
    );
  if (data.length === 0) return <Empty title="顧客がまだいません" />;

  return <DataTablePreset columns={columns} data={data} />;
}